WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Woocommerce: Disable Prices & Replace Price Tag Image (2 posts)

  1. Archon147
    Member
    Posted 1 year 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!

  2. Archon147
    Member
    Posted 1 year 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/

Topic Closed

This topic has been closed to new replies.

About this Topic