I'm working on a WordPress site (using a child theme of Divi) & having an issue with the WooCommerce Shop. The individual Product pages are not displaying the Add to Cart button or the price. Those elements are there (I can highlight over them on the page & click the area where the button should display) but they're hidden for some reason. Anyone know how to make them display?
Here is an example page. Thanks!
I saw your product page, It just a CSS issue, put the following css snippet on your theme's style.css
.woocommerce button.button.alt {
background-color: #a46497 !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: #77a464 !important;
}
Related
I'm trying to change the color of the current page number on my woocommerce site. The site is using the Astra theme (free version) and elementor (free) but I cannot seem to figure out how to change the color using the additional CSS option.
I want to change the color of the page-number.current to white (#ffffff) AND change the hover color to white as well. I would also have to change the hover color of the prev.page-numbers AND next.page-numbers to white as well.
For some reason, these are the only buttons that do not adapt to the global colors of the website. I know which global color I would have to change, but this will affect all colors on my website - that's why I'm looking for some help.
You can use the body > Page ID in a CSS code.
Here is the example code.
body.page-id-15{background-color:#eee;}
Let me know if that helps!
Thanks for helping!
I ended up adding the following code to the extra CSS option:
/* Woocommerce current page number color to white*/
.woocommerce nav.woocommerce-pagination ul li span.current {
color: var(--ast-global-color-6);
}
/* Woocommerce page numbers hover color */
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--ast-global-color-0);
color: var(--ast-global-color-6);
}
I am using Woocmmerce with Astra theme and Elementor. I am already used to use CSS here and there to avoid using expensive plugins to adjust my Woocommerce shop. I decided to use price over the thumbnail and I made negative bottom padding for thumbnails to drag the price and "Add to cart" higher. I can see that button is definitely higher in z-index than a thumbnail. The problem is the price is completely hidden by the thumbnail, even though in Elementor it's over the thumbnail. I tried to use z-index in CSS but to no avail. Am I missing something?
Here is an example of my CSS code for the price.
.woocommerce div.product p.price, .woocommerce div.product span.price{
background-color: #fff;
z-index: 99;
}
For an item to have a z-index, you have to set a position attribute other than static. https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
.woocommerce div.product p.price, .woocommerce div.product span.price{
background-color: #fff;
z-index: 99;
position: relative;
}
Maybe using !important, if z-index is already set somewhere else in .woocommerce:
.woocommerce div.product p.price, .woocommerce div.product span.price {
background-color: #fff;
z-index: 99 !important;
}
I was wondering, is it possible to remove product related information from the checkout page (this should only be visible in the shopping cart)
Thanks a lotenter image description here
You can hide with css:
Add css code to your child theme's stylesheet
Or via Customiser > Additional CSS
.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody { display: none; }
I am currently trying to change the text color of product variation drop down menu. Currently, when I use the drop down menu, the font shows up light gray on a white background and is hard to read. enter See snippet from siteIn addition, I want to change the font color for "Description" and "additional information". I am using wordpress and Catch Responsive theme.
While the actual CSS of the site would be nice to have, the main woocommerce.css file has the following selector:
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a
So, either in your child theme file or your Appearance > Customizer > Additional CSS you can add:
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: #333; /* Pick Color Here */
}
Inactive tabs have the selector: .woocommerce div.product .woocommerce-tabs ul.tabs li a
While those selectors are relatively overcomplicated, they're in the base CSS so you'll need a selector at least as specific to get them to work.
Hi everyone,
Is there anyways to put product without using product name? My products don't have name. Anyone who can help please respond.
Thanks,
Best Regards.
You can use a CSS to do so.In listing page you can use following CSS :
ul.products h2.woocommerce-loop-product__title {
display: none;
}
It might be differ base on version.
For compatibility with future updates of your theme and plugins, I've found a better way to do this is through WooCommerce hooks. To remove the title from your Single Product Page, you should put the following two lines in your theme's main functions.php.
in this titla field is not coming on product insert.
remove_action('woocommerce_single_product_summary','woocommerce_template_single_title', 5 );
Other way is but in this your title is coming but you hide that because of you don't want to see that.
.woocommerce li.product .entry-header h3 a, .woocommerce-page li.product .entry-header h3 a {
display: none;
}
.woocommerce .price, .woocommerce-page .price {
display: none;
}
I hope this worth to you