[Resolved] Toolset WooCommerce Product Template.

[Author]

Posts

[Anonymous]

I’m starting to create and customize a template for Woo Products.

I’ve been following you guide here
https://toolset.com/learn/create-an-ecommerce-wordpress-site/

There are a couple of things I’d like some help with:
1. My theme container is 1400px but for the product pages I’d like to reduce that to 1100px. I’ve set the container width in theme options value to 1100px but it hasn’t change, still 1400px.
2. I’m using Generate Press as the theme. Product Page styles are currently inherited from this theme, but can we override them? Is there a list of CSS classes for WooCommerce? What would we use for the add to cart button.

Many Thanks
Scott

[Luo Yang]

Dear Scott,

It seems to be a CSS problem, for single prodcut post, there is CSS class name "single-product" in the body tag, so you can setup custom CSS codes to style the content area, for example:

.single-product .site-main{
width:1100px;
}

With the class name ".single-product", you will be able to override your theme settings.

I assume we are talking about the "add to cart" button outputted from shortcode [wpv-woo-buy-or-select], I just tested it in my localhost, there are some CSS class name you can use, for example:
button
product_type_simple
add_to_cart_button
ajax_add_to_cart