"change Sale/Feature badge to custom shape" (#1276389) / Laborator Support

Comments

3
allexarh started the conversation
August 18, 2017 at 8:11am
Hi
How can I change the Sale/Featured badges to a custom shape? And the text inside them?
Alex
{"wp":{"use":false,"adminUrl":"","username":"","password":""},"ftp":{"use":false,"url":"","port":"","user":"","password":"","path":""}}

[deleted] replied

August 19, 2017 at 9:09am

Hi allexarh

Text changes can be done by using plugin Loco Translate. as per visually changes this is they current CSS in our theme, you can modified and passed on Custom CSS section.

.woocommerce .product .onsale{
    width: 60px;
    height: 60px;
    line-height: 60px;
    top: 5px;
    right: 15px;
    background: #00b19e;
    font-size: 16px;
    color: #fff;
    text-align: center;
    display: block;
    overflow: hidden;
    z-index: 100;
    position: absolute;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-background-clip: padding-box;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
    -webkit-transform: translate3d(20px,-20px,0);
    transform: translate3d(20px,-20px,0);
}
.woocommerce .product .onsale.featured{
    font-size: 13px;
    background: #888;
}

3
allexarh replied
August 19, 2017 at 10:59am
Hi,
I do not need to modify the parameters of the current badge. I need to change the shape of the badge entirely. Not to be a circle anymore, but a shape of my choosing, a puzzle piece. Do I need to change some files somewhere?
[deleted] replied
August 19, 2017 at 3:34pm
Hi allexarh
As you can see you have to do the change from CSS find a form i will try to help you, no file need to change.
3
allexarh replied
August 19, 2017 at 3:45pm
This is the puzzle piece I need to have instead of the circle.
3
allexarh replied
August 19, 2017 at 4:42pm
And a .svg for the same shape
[deleted] replied
August 19, 2017 at 5:05pm
Hi allexarh
Can you please share with us your sites WP Credentials.
To include your credentials click Insert Credentials button in editor toolbar. (See how)

Your information will be safe because your reply will be marked as private automatically.
allexarh replied privately
[deleted] replied
August 19, 2017 at 6:49pm
Hi allexarh
Can you please write the domain ( url ) also
allexarh replied privately
[deleted] replied
August 19, 2017 at 7:09pm
Hi allexarh
I just finished implementation take a look : http://plantingpuzzle.com/shop-2/
3
allexarh replied
August 19, 2017 at 7:13pm
Looks great! I am delighted :D. How did you do it?
PS. to customize the size or color do i need to reupload the modified .svg and change the image path?

Thank you!

[deleted] replied

August 20, 2017 at 7:07am

Hi allexarh

Sorry to don't introduce the steps i tooked to make that change.

1) Installed plugin SVG Support to support WP with SVG

2) I uploaded the image to Media Library and got the full URL of image,

(view large version)

3) Then in Custom CSS Section i past the code with image URL, i can see that you have placed new code with new style and looks amazing

.woocommerce .product .onsale {
    background: transparent url('http://plantingpuzzle.com/wp-content/uploads/2017/08/Icon-puzzle-cleaned_Albastru.svg') no-repeat;
    background-size: 62px;
    width: 62px;
    height: 90px;
    border-radius: 0;
    overflow: visible;
    top: -13px;
    right: 2em;
    background-position: right;
    line-height: 75px;
    padding-left: 14px;
    font-size: 16px;
}
.woocommerce .product .onsale.featured {
    background: transparent url('http://plantingpuzzle.com/wp-content/uploads/2017/08/Icon-puzzle-cleaned_Verde_mic3.svg') no-repeat;
    background-size: 62px;
    width: 62px;
    height: 90px;
    border-radius: 0;
    overflow: visible;
    top: -13px;
    right: 2em;
    background-position: right;
    line-height: 75px;
    padding-left: 14px;
    font-size: 16px;
}

P.S: If you like our theme, it would help us a lot if you could give us a five-star rating on Themeforest from your Downloads tab. A huge thank you from Laborator in advance and have a great week!

Will set this ticket as solved from here.

1 Like