WooCommerce CSS

Good evening,

I am working on some final customizations for the comparison feature accessed via /condo-intel/. You could try accessing it directly via /compare/ but it may not work if products aren’t added to that cart. I am having some trouble targeting these items with CSS:

Screenshot: https://prnt.sc/k7socd

  1. There is text labeled “Remove Product” above each image; could that be changed to “Remove Condo”?
  2. Could “Products” on the left say “Condos”?
  3. Could the button be hidden/set to not display?
  4. Could the entire “Price” row be hidden/set to not display?

Thank you!
J

Hi There @weatherstone

Thanks for writing in! I could not locate the exact page URL of your screenshot as I could not see it in the homepage. It seems you’re using a 3rd party plugin, so you can check their documentation on how to translate their strings.

Our translation guide is located here (https://theme.co/apex/forum/t/setup-translation/61). Also you can follow the last method mentioned here (https://theme.co/apex/forum/t/translate-read-more-and-leave-a-comment-with-pro-child-theme/17136/2?u=mldarshana). Basically you need to setup a child theme first and add the code into your child theme’s functions.php file.

To hide those sections, try adding the following CSS rules into your X -> Theme Options -> CSS area.

.products.price-row {
    display: none;
}
.add_to_cart_button.ajax_add_to_cart {
    display: none;
}

Hope that helps.

Good morning,

  1. Regarding the translation, not sure how that is relevant as the only third-party plugin being used here is a Woocommerce extension.
  2. Unfortunately that CSS did not work. It makes me feel better to know even the pros sometimes have difficulty targeting items on the page! Do we need to add something before so it knows which page/section to target?

Thank you,
J

Hello @weatherstone,

Thanks for updating the thread. :slight_smile:

  • I checked your website and from Condo Intel page I compared two product listing. From the source code I can see that you are using Products Compare for WooCommerce plugin to compare products. In that regards for translation you need to get in touch with the plugin developer. Another option is to use plugins like WPML. You can take a look at WPML getting started guide here.

https://wpml.org/documentation/

  • I tested the code shared by my colleague @mldarshana and the code is working absolutely fine on my end. Please see following screencast.

You can also try adding following CSS under X > Theme Options > CSS and see how it goes.

.products.price-row {
    display: none !important;
}
.add_to_cart_button.ajax_add_to_cart {
    display: none !important;
}

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

Thanks.

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