price banners

  • Resolved Art65

    (@art65)


    10 years, 5 months ago

    Hey guys, I’m using the woocommerce theme and I want to change the pricing flags. Now I have red banners that contain the price of my items but they cover up most of the picture. Is there a way to have the price appear at the bottom of the picture without the banner?

    My site is khillarmory.com if you want to check out what I’m talking about.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Aloha Art65!
    You are on your way to a great site! You need to change some of the code in your style.css file. Make sure you are using a child theme so when your original theme updates you don’t loose all the customization. Just paste this into your child theme and that will take care of it.

    ul.products li .price:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent;
    border-image: none;
    border-style: solid;
    border-width: 14px 2px 14px 14px;
    content: "";
    left: -14px;
    position: absolute;
    top: 0;
}
ul.products li .price:after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent;
    border-image: none;
    border-style: solid;
    border-width: 6px 6px 6px 0;
    bottom: -12px;
    content: "";
    position: absolute;
    right: 0;
}
ul.products li .price {
    background: none repeat scroll 0 0 transparent;
    color: #d23d46;
    font-size: 1.875em;
    padding: 2px 12px 2px 8px;
    position: absolute;
    right: -6px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    top: -25px;
}

    Thread Starter Art65

    (@art65)

    OMG thanks Brooke “The Coconut Ninja”. That is awesom!! appreciate it so much.

    Anytime! Glad it worked for you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘price banners’ is closed to new replies.