Woocommerce appearance customization (followup on locked topic)

Support
#1

I am working on a woocommerce site using xtheme but I would like to significantly alter the appearance of the buttons, store front layout, etc-- what is the easiest way to edit the appearance of the store/items within it? I currently have the ethos stack running but would like to change the appearance of buttons and appearance of items on the main grid of the shop page

Some examples of changes I would like to make

rollover prices/product info- eliminate this and have all rollover info displayed below the thumbnail image

add to cart button- replace this with a simpler button, black button white text inside no drop shadows or borders, would be nice to have the option to put a white outline around the entire black button

change shop product price and info font

change add to cart font

add a video background to the store-is this possible?

http://www.motherculture.love/product/wiljemmi/

#2

Hello There,

Thanks for writing in!

1.) “rollover prices/product info- eliminate this and have all rollover info displayed below the thumbnail image”

.woocommerce li.product .entry-wrap {
    position:relative;
}

2.) “add to cart button- replace this with a simpler button, black button white text inside no drop shadows or borders, would be nice to have the option to put a white outline around the entire black button”

  • You can make use of this code:
.woocommerce li.product .entry-header .button,
button.single_add_to_cart_button {
    background-color: black;
    box-shadow: none;
    border-color: white;
}

3.) “change shop product price and info font”

  • You can update the code in #1 and use this instead;
.woocommerce li.product .entry-wrap {
    position:relative;
    font-family: Arial !important;
}

4.) “change add to cart font”

  • You will have to update the css code in #3 and add this instead:
.woocommerce li.product .entry-header .button,
button.single_add_to_cart_button {
    background-color: black;
    box-shadow: none;
    border-color: white;
    font-family: Arial !important;
}

You can add font-size: xxpx; too.

5.) “add a video background to the store-is this possible?”

  • This is only possible with custom development. Regretfully this request is beyond the scope of our support.

Thank you for your understanding.

#3

Awesome thanks so much for this, you can see the updates here http://www.motherculture.love/shop/

a couple more questions

  1. how can I get rid of the rollover/gray area complete- I would like this to be white/the same color as the page background with black text for the product name and price, how can I do this

  2. how can I set the font for the product name?

  3. how can I make all of the product text/price left justified rather than centered on the shop page

on this page-
http://www.motherculture.love/product/wiljemmi/

  1. How do I eliminate the redundant small text that says Description right above the box where it says description large?

  2. how do I get rid of the scroll bars in the box that says Description?

#4

Hi There,

1.) See this: https://screencast-o-matic.com/watch/cblheq2g0L

.woocommerce li.product .entry-wrap:before {
    background: transparent !important;
}
.archive.woocommerce li.product .entry-header h3 a {
    color: red; /*Change this to your preferred color of the product title*/
}
.archive.woocommerce li.product .entry-header .price>.amount{
    color: red; /*Change this to your preferred color of the product price*/

}

2.) See this: https://screencast-o-matic.com/watch/cblhel2g0Z

archive.woocommerce li.product .entry-header h3 a {
    font-family: Lato; /*Change this to your preferred font*/
}

3.) See this: https://screencast-o-matic.com/watch/cblhej2g0l

.archive.woocommerce li.product .entry-header {
    text-align: left;
}
.archive.woocommerce .price {
    padding-left: 20px; /*Adjust this accordingly to align price with product name*/
}

1.) See this again: https://screencast-o-matic.com/watch/cblheu2gZB

.woocommerce div.product .woocommerce-tabs .description_pane h2 {
    display: none;
}

2.) Unfortunately, I don’t see scroll bar.
For more customization, please use browser developer tools to inspect element and then apply the changes. See those screencast as guide. Further customization would be outside the scope of our support. Thank you for understanding.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.