Woocommerce: Disable Prices & Replace Price Tag Image

  • Resolved Archon147

    (@archon147)


    10 years, 10 months ago

    Hi everyone,

    I’m having 2 problems with Woocommerce and was hoping for any help. I’m not a programmer, so idiot-proof answers would be appreciated. I can follow directions very well 😉

    1) I need to temporarily turn off prices across the board to all users and subsequently be able to turn them back on at a later date. Whether this be removing a string of code or whatever, it doesn’t matter to me as long as the answer is not to purchase that Woo-plugin. This should have been an option in Woo from the start…

    2) I am using Woocommerce in addition to my theme and would love to change those ugly circles that they use as the price backdrop. A Charcoal bar with opacity of .75 for example would be perfect.

    Thanks in advance guys!

Viewing 1 replies (of 1 total)
  • Thread Starter Archon147

    (@archon147)

    10 years, 10 months ago

    Alrighty, So I figured out my issues and here is how I did it:

    1) I went ahead and bought the “Catalog Visibility Options” plugin for woocommerce. Not a free solution, but the clock was ticking and this was easy. Also it comes with some nifty options.

    2) I located the image : “price.png” in the woocommerce/images folder and made that into a rectangle.

    Then I went into wp-content/themes/whateveryourthemeis/Woocommerce/style.css

    I looked for the lines:

    div.product div.images p.price, ul.products li.modern .price, .productslider-wrapper .price {
	color:white;
	font-size:2em;
	width:84px;
	height:84px;
	font-weight:400;
	text-align:center;
	line-height:1.2;
	background:#191a21 url(images/price.png) no-repeat;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius:60px;
}

    This is that price label, price circle, or whatever you want to call it. Changed Height, Width, added Opacity, changed the background color. Most importantly I commented out the last three lines (because they say radius) with the “/*” and “*/”. Here’s what the code looks like:

    div.product div.images p.price, ul.products li.modern .price, .productslider-wrapper .price {
	color:white;
	font-size:2em;
	width:165px;
	height:35px;
	opacity: .75;
	font-weight:400;
	text-align:center;
	line-height:1.2;
	background:#191a21 url(images/price.png) no-repeat;
	/*-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius:60px;*/
}

    This is how it now looks:
    http://khourybros.com/product/topaz-visionnaire-ring/
    Need to change location of the rectangle but works for now.

    Mine is a rectangle, but if you want a resource on the code for rounded edges go here:
    http://www.css3.info/preview/rounded-border/

Viewing 1 replies (of 1 total)
  • The topic ‘Woocommerce: Disable Prices & Replace Price Tag Image’ is closed to new replies.