Customize Ethos Woocommerce Product Listing

[weatherstone]

Good evening,

I would like to make a couple simple customizations to my individual product listings. Please see the attached credentials to access the website, but here is a screenshot: https://prnt.sc/k0oe7q.

1. Hide Categories and Tag information from bottom of product listing.
2. Remove first “Additional Information” text.
3. Format “Add to Cart” button to simply be flat and black with white text on it, no hover effect.
4. Bonus if the “select to compare” can be moved onto one line and super bonus if it can be formatted to look like the “Add to Cart” button.

Thank you,
J

[mldarshana]

Hi There @weatherstone

Thanks for writing in!

1.To remove categories and tags, add the following CSS into your Pro -> Theme Options -> CSS area.

.woocommerce .product_meta {
    display: none;
}

2.To disable additional information, head over to Pro -> Theme Options -> WooCommerce -> Single Product area.

3.For the add to cart button add the following CSS rules into your Pro -> Theme Options -> CSS.

.single_add_to_cart_button {
    background-color: black;
    color: white;
}
.single_add_to_cart_button:hover {
    background-color: black;
    color: white;
}

4. To style select to compare section, add the following CSS rules into your Pro -> Theme Options -> CSS.

.woocommerce-products-compare-compare-button label {
    max-width: 50%;
    float: left;
    margin-right: 1%;
}
.woocommerce-products-compare-compare-button, .woocommerce-products-compare-compare-button a {

    background-color: black;
    color: white;

}

Hope that helps.

[weatherstone]

Hello,

Thank you for your response! Just a couple more items:

2. I am not trying to disable the “Additional Information” section. I am just trying to remove the table header which repeats “Additional information” in tiny text. I would also like to capitalize the word “Information” there. Please refer to the original screenshot to see what I mean.

3. Could you tell me how to capitalize all the text in the button (“ADD TO CART”)?

Thank you!

[nico]

Hi @weatherstone,

1 - Use this code below:

.x-nav-tabs.one-up>li.additional_information_tab:nth-child(1n)  {
    display:none;
}

2 -

.single_add_to_cart_button {
     text-transform: uppercase;
}

Let us know how it goes.

Thanks.

[weatherstone]

Hello,

Thank you for your response!

1. Your code worked perfectly, but I would also like to capitalize the “i” in “Additional information” so that it reads “Additional Information.”

2. The 'Add to Cart" button looks great, except for the larger margin on the bottom? Could you tell me how to reduce that to match the top?

Thank you!
J

[thai]

Hi There,

Please also add this custom CSS:

.single-product form.cart {
    margin-bottom: 5px;
}

.additional_information_pane h2 {
    text-transform: capitalize;
}

Hope it helps

[weatherstone]

Hello,

I think I misspoke. What I am trying to adjust is the padding at bottom of the “Add to Cart” button to match the padding above the text. I would also like to adjust the letter spacing if possible to stretch out the letters more?

Thank you!
J

[nabeel]

Hi again,

Try adding the following code as well:

.single-product form.cart {
    margin-bottom: 35px !important;
}
.single_add_to_cart_button {
    letter-spacing: 2px;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!