Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 4, 2020 at 1:09 pm #1209520
    ChapSmurf

    HI,

    I am wanting to individually style the “Add To Cart” and “Show Details” buttons on the WC shop page, rather than have each button the same colour and delimetered by a |.

    I’ve found the class controlling the buttons, but I can’t seem to individually change the colours of each button. I’m wanting it similar to this mock-up I’ve made – https://ibb.co/Kwy8MhF

    The shop can be viewed here – https://photocast.weble.co.uk/shop/. It’s a staging site so the site isn’t complete.

    Thanks,

    Steve

    May 5, 2020 at 6:19 am #1209800
    Rikard

    Hey Steve,

    You can target that element using this CSS:

    a.show_details_button {
  background: red; 
}

    You would likely need some more CSS tweaks to get it looking like your mockup though.

    Best regards,
    Rikard

    May 5, 2020 at 11:51 am #1209894
    ChapSmurf

    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.
    May 5, 2020 at 12:37 pm #1209920
    ChapSmurf

    A quick update – and I thought this might happen – but I am also using the Product Slider (on the home page). Whilst the colours were correct, the sizing (width) wasn’t, so here is the code to clear that up. I’ve included the background and padding styles again, although these aren’t required if you want the colours and padding to remain the same as before. 

    /* Change Add To Cart Avia button background colour */ 
/* and size in Product Slider */ 
.avia-content-slider a.product_type_simple  {
width: 100% !important; 
background: blue !important; 
padding: 10px !important; 
}

/* Change Show Details Avia button background colour */ 
/* and size in Product Slider */ 
a.show_details_button {
width: 100% !important; 
background: red !important; 
padding: 10px !important; 
}
    May 6, 2020 at 5:31 am #1210221
    Rikard

    Hi Steve,

    Thanks for the update and for sharing your solution. So everything is working as it should now then?

    Best regards,
    Rikard

    May 6, 2020 at 10:22 am #1210275
    ChapSmurf

    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

    May 7, 2020 at 12:42 am #1210570
    Jordan Shannon

    /Hi,

    I’m glad this was resolved for you. Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    May 7, 2020 at 12:30 pm #1210698
    ChapSmurf

    Hi Jordan,

    You can close this if you like, as the question I had is now answered.

    Many thanks,

    Steve

    May 8, 2020 at 7:06 am #1210939
    Rikard

    Hi Steve,

    Thanks for letting us know, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘WooCommerce "Add To Cart" and "Show Details" Button Styling Issue’ is closed to new replies.