Here is what the page looks like, after inserting the code into functions.php
http://apcfinearts.com/wordpress/?product=tide-pools
As you can see, the text is now gone. But what remains is something that kind-of resembles an arrow.
Does anyone know how to remove this graphic from my grouped/variable products?
Hey,
Are you wanting to completely remove it so that it no long shows anything there?
Thanks
I return to this thread 4 months later with a solution
This is a Two-Parter, because the “graphic” is actually 2 pieces. The following code removes the price label for variable/grouped products, but leaves the prices of simple products intact.
-1- Place this code at the bottom of the Woocommerce Functions.php
It removes the “From: $xx” label and the box that contains it.
add_filter('woocommerce_variable_price_html','custom_from',10);
add_filter('woocommerce_grouped_price_html','custom_from',10);
add_filter('woocommerce_variable_sale_price_html','custom_from',10);
function custom_from($price){
$new_from = "Deposit";
$price = str_replace('','','');
return $price;
}
-2- Place this code in your custom CSS. It removes the “graphic” that I was previously unable to remove.
.products li .price:after { content:none; }
Code-wise there is probably a much simpler solution, but I’m not quite there yet (I have an extremely basic understanding of Javascript).
*This only removes The “from” price labels from the catalog view. In the product view, you’re still left with the remnants of a price label. If this is removed in CSS, it’s removed from every product (including simple products). If anyone knows how to remove it from variable products only, please let me know!
Edit: The page linked to in my second post no longer exists.
- if you want to see what changes I’ve made so far, just visit apcfinearts.com and go to the “Shop” section.
Update: Since my last post, I made some changes.
- I’m posting some of the changes i made to help others like me get started customizing their store- specifically, display of the price tag.
- The changes are also a simple fix the “remnants of a price label” problem in my post above.
- I assume you used the JS code from previous post to remove “from” and the price from variable products. If not, it’s okay. Your simple/ variable price tags will look similar (no “ugly line” problem).
*Note: Play around with the values if things don’t look good on your page. I use Suffusion Theme & a plugin that makes Woocommerce CSS mesh with Suffusion. SO… the below CSS should work for users without Suffusion. If not, let me know.
The price tag is actually a combination of 3 elements (price:before / price / price:after). The before and after are what make it look like a price tag. This removes them, leaving only the price as a box.
/* Woocommerce Remove the Price Tag Tail */
div.product p.price:before {display: none;}
/* Woocommerce Product Page Bullet Point */
div.product p.price:after {display: none;}
For simple products, the code above works fine. For variable, you get an ugly blank line. The code below makes the simple product price look better, and the “ugly line” on variable products looks like it belongs.
/* Woocommerce Product Page Price Label */
.woocommerce div.product p.price, .woocommerce #content div.product p.price {width:95%;padding:2px 3px;text-align:center; color: #ffffff; background-color: #537ac6; font-size: 150%; border-radius: 4px; margin: 0px 10px 10px 10px;}
This changes the price label for the shop page /categories /related products /etc. It’s the same color scheme as above, and has a light shadow effect.
/* Woocommerce Catalog Page Price Label */
.products li .price, .woocommerce #content .products li .price {color: #ffffff; background-color: #537ac6; font-size: 150%; padding: 0px 4px;-webkit-box-shadow: 2px 2px 6px #666666; -moz-box-shadow: 2px 2px 6px #666666;box-shadow: 2px 2px 6px #666666;}
Just thought I’d drop a quick post to say thank you to apcgallery. Not only did you come back to help others…your solution worked perfectly and saved me hours of bother.
thank you
Chris
Thanks, I’m glad to hear it worked for someone other than myself!
Hi apcgallery,
I was looking at your site shop and noticed that you were able to get the sale/price badge to show up in the left hand corner of your image (related product).
I’m trying to do this so that the sale badge doesn’t push my images down in category view.
Can you share how you did this?
Thanks.
Hey Sleepymonk,
Where does yours display?
Link me to your store and I may be able to help
Hi apcgallery,
My site is not live yet, it’s in maintenance mode so I can’t share links yet.
Actually, I think I’m confused. You got your sale price to appear as an overlay of one of your images, in the upper left hand corner.
Similarly, I want to move the sale balloon/box (no price, just SALE!) so that it appears as an overlay rather than above the category images.
I’m hoping it’s just a simply CSS tweak.
Without seeing the site it’s a little harder to know just what will do the trick, but I’ll give it my best shot.
I’m guessing you’re talking about the prices in the books category, right?
Here’s what I got. Try adding these to your custom CSS
.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price {
display: block;
margin-bottom: .5em;
}
.products li .price {
position: absolute;
float: left;
top: 5px;
}
As for the second part… I’m not 100% sure of what you want, but here’s my crack at it.
This works on simple products (like in the books section). None of my items were actually on sale, so the below CSS makes all simple products display “SALE!”.
So we’re gonna “cover up” the price with “price:after”.
Change any of the below (except “position”) to suit your needs.
.products li .price:after {
content: "SALE!";
right: -15px;
top: 0;
font-size: 100%;
color: #FFFFFF;
background-color: #000000;
position: absolute;
border-width: 0px;
I’ll be honest; this is not the best way to do it.
Actually it’s pretty sketchy. But it’s all I got right now.
Thanks, apcgallery. Yes, it was the price on the catalog items that I was referring to.
I just want to move the sale button to the upper left corner overlaying the product image, like you have done. This is helpful, I will give it a shot! I don’t usually put price in, but that might be useful.
I’d also like to change the shape of it, currently it’s a box, would like to make it round, any ideas there?
I’m just wondering what theme you’ve used as the basis for your website? It’s very nice, clean looking.
Thanks for your help.
Hi again, apcgallery. That didn’t do the trick for me, it put the price up in the left corner (actually two prices, since the display is regular price crossed out and sale price beside it), so the sale button didn’t cover it up.
I tried a few more tweaks but wasn’t able to adjust it. I think I will start a new thread.
This is part of the code for the sale flash button:
.woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale {
top: 0;
right: 0;
left: auto;
margin: -6px -6px 0 0;
}
