AAWP Plugin Review: Replace Your Amazon Images & Create Better Product Boxes

What is AAWP?

AAWP is a helpful WordPress plugin that uses the Amazon API to automate the pull of product information from the Amazon website. It’s a great way to showcase Amazon products while customizing the look of the product boxes.

Customize Product Boxes using CSS

If you’re interested in customizing the look of your AAWP box, you can use their CSS box to use specific colors, remove or add borders, and change fonts.

Here is the specific CSS I use with the AAWP plugin. I’ve removed borders, changed up the look of the button to match my theme colors, and made the titles and prices bigger. This CSS works specifically with the ‘Product Boxes’ display type and the ‘Widget Vertical’ template.

# customize the product title font
.aawp .aawp-product--widget-vertical .aawp-product__title {
    font-size: 20px;
    font-weight: bold;
}

# customize the look of the price
.aawp .aawp-product--widget-vertical .aawp-product__price--current {
	font-size: 24px;
	font-weight: bold;
	color: #3A4C60;
}

# customize the look of the image
.aawp .aawp-product--widget-vertical .aawp-product__image {
	max-height: 300px;
	margin: 30px auto;
}

# removing the border
.aawp .aawp-product--widget-vertical {
	border: none;
}

# customizing the look of the button
.aawp .aawp-button, .aawp-button {
	color: #ffffff!important;
	background-color: #7C6D88;
	font-size: 18px;
	padding: 12px 36px;
	font-weight: 700;
	border: none!important;
	line-height: 20px;
}

# customizing the look of the button
.aawp .aawp-button:visited, .aawp-button:visited {
	color: #ffffff!important;
	border: none!important;
}

# customizing the look of the button
.aawp .aawp-button:focus, .aawp .aawp-button:hover, .aawp-button:focus, .aawp-button:hover {
	color: #ffffff!important;
	background-color: #3A4C60;
	border: none!important;
}

# customizing the look of the disclaimer
.aawp-credits, .aawp-disclaimer {
	font-size: 10px;
	color: #3A4C60;
	font-style: italic;
}

# customizing the look of the prime image
.aawp .aawp-product--widget-vertical .aawp-product__meta {
	margin: 20px;
	display: flex;
        justify-content: center;
}

This is a blogging post about
AAWP WordPress Plugin Review: Create Better Product Boxes.