How is it possible to divide or split the price (sale or normal, depending on the default) as shown in the attached image?
Final_Result
This worked for me. I added with 100% width the full price, which then made the current price drop down to the next line. I just added it to the style.css in my child theme.
.woocommerce div.product p.price del, .woocommerce div.product span.price del {
width: 100%;
}
Related
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;
}
How can I turn our product list into landscape orientation? It doesn't seem to look good when our product list is on portrait. There's a lot of white space. Would really like to fix this. Here's a link to the site: http://aom.sg/product-category/air/airdisinfect/ Thank you for your help! TT
This is only a CSS matter. There's a style on your page that just needs an !important tag to override the width of the product item. Change it to this:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 100% !important;
}
Here's how it'll look like:
To make sure it doesn't affect the other pages, you might want to wrap the whole content of this page in a div and add that to the CSS selector like this:
<div class="products-wrapper">
<ul class="products">
<!-- product list -->
</ul>
</div>
Then on your CSS:
.woocommerce .products-wrapper ul.products li.product,
.woocommerce-page products-wrapper ul.products li.product {
width: 100px !important;
}
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
I have a product page here: http://www.noliftpalletmover.com/order/
I would like to always show Add to Cart rather than having it appear on hover. I have tried some CSS fixes but to no avail. Any suggestions?
In your stylesheet http://www.noliftpalletmover.com/wp-content/themes/konstruct/assets/css/style.css?ver=1.1.1 at line number 6421, position of add to cart button (class name .woocommerce .products li .add_to_cart_button, .woocommerce-page .products li .add_to_cart_button) is set to "absolute". Remove "position", "left", "right" and "z-index" from that class declaration. And comment out class declaration at line number 6165 which as transform: translateY. That should do the trick for you.
Hope this helps.
You can use a plugin like Simple Custom CSS to add the following CSS to your site:
.woocommerce .products li .add_to_cart_button, .woocommerce-page .products li .add_to_cart_button {
position: inherit !important;
bottom: 0 !important;
margin-top: 15px !important;
}
If this answers your question please mark it as the answer :)
I'm trying to change the font size and color of product's price in the products page. I added this to my custom css to try to override the original css, but no matter what, it does not work.
.woocommerce ul.products li.product .price {color:#ec7f91;font-size:16px;}
or
.woocommerce ul.products li.product .price {color:#ec7f91;font-size:16px;!important}
Any ideas?
First of all, it's probably because all the other styles are overwriting it.
Second, the !important needs to be on both, not just one, and it needs to be inside the semicolon.
Fixed up code:
.woocommerce ul.products li.product .price {
color:#ec7f91 !important;
font-size:16px !important;
}