WordPress.org

Ready to get started?Download WordPress

Forums

[closed] changing default price ribbon image in woocommerce (5 posts)

  1. evilshopash
    Member
    Posted 1 year ago #

    hey guys,

    does anyone know how to change the default ribbon price image used in wootique? its really bugging me, it doesnt fit at all with the rest of my site.

    Cheers,

  2. tillieb20
    Member
    Posted 1 year ago #

    If you find this out, please please share with me. :-)
    I've used Inspect Element and I can't find this out either...

    I would like the price ribbon to not be there at all like in the demo.

  3. bhmediamarty
    Member
    Posted 1 year ago #

    The ribbon is comprised of a number of CSS elements including a CSS triangle trick using borders.

    In the main style.css file there's a set of elements under
    ul.products li .price (approx line 323 in the stylesheet) which you can adjust to change the appearance and position of the ribbon.

    In the custom.css add the following to adjust the ribbon colour and position.

    ul.products li .price {
    top:10px; /* adjust to move ribbon up or down */
    right:-6px; /* how far it sticks out the side */
    /* can be changed to left */
    background: #d23d46; /* change ribbon colour */
    }
    ul.products li .price:before {
    border-color:#d23d46 #d23d46 #d23d46 transparent;
    /* change the #d23d46 to same value as the style above to change ribbon ends or set all to transparent to remove */
    }
    ul.products li .price:after {
    border-color: #892026 transparent transparent transparent;
    /* change the #892026 to a darker value to the one you set in the above or set to transparent to remove the little tuck under the ribbon */
    }

    Hope that helps.

  4. bhmediamarty
    Member
    Posted 1 year ago #

    Further to the above, if you change all the colours in ul.products li .price:before and ul.products li .price:after to transparent and then reposition the .price:after so that it's vertically in line with the .price element then you can add width to the two elements and add background: url(yourimage); to the before and after to create rounded or other graphical ends to the price box. (there is CSS that can do rounded corners but for quickness I just went with explaining how to add an image).

    Again, hope that helps.

  5. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    I'd suggest asking on the WooCommerce forum in your own thread -

    http://wordpress.org/support/plugin/woocommerce

    And posting a link to your site in your new post.

Topic Closed

This topic has been closed to new replies.

About this Topic