Hi Rikard,

The styling above was forcing the “Add To Cart” button on the Shop page to align to the left, probably because the width was set at 100% for the Product Slider afterwards and set with an !Important property which I thought might create some issues, but was the only way to actually force the styling to change. So if someone isn’t using the Product Slider, the first part of the styling works perfectly.

If someone is using the Product Slider, the way around the text alignment issue is to set the WooCommerce Shop buttons to width: 100%; also. What this will do is to stack them on top of each other like in the Product Slider, rather than place them side-by-side. To be honest, that actually makes the site a little more uniform with regards to styling.

So for me, this is all working – although I’ve just installed another plugin which has added an extra button so I now need to sort that one out too :)

Thanks,

Steve

Hey Rikard,

Thanks for your reply. I don’t know why, but I was putting the a (HREF) at the end of the class, like this .show_details_button a {}

Anyway, I’ve got it to work now, so here is my solution for anyone else who wants to do the same. Unfortunately I’ve had to use a lot of !important statements, otherwise the styling didn’t apply. This also looks good on mobile devices.

Padding needs to be removed from the main single button, and then re-applied to each individual button, otherwise the .avia_cart_buttons colour comes through. I’ve also lifted the opacity levels too.

/* Remove padding in main Avia cart button area*/
/* on main WooCommerce Shop page */  
.avia_cart_buttons {
    padding: 0px !important;
    opacity: 0.7;
}

/* Change Show Details Avia button background colour */ 
/* and size on main WooCommerce Shop page */ 
a.show_details_button {
width: 50% !important; 
background: red !important; 
padding: 10px !important; 
}

/* Change Add To Cart Avia button background colour */ 
/* and size on main WooCommerce Shop page */ 
a.product_type_simple  {
width: 50% !important; 
background: blue !important; 
padding: 10px !important; 
}

/* Remove Delimiter in Add To Cart Avia button */ 
/* on main WooCommerce Shop page */ 
.button-mini-delimiter {
display: none;
}

Cheers,
Steve

• This reply was modified 4 years, 7 months ago by ChapSmurf.