change the rectangular background of the note "compare products" color

Hello Xtemos,

I would like to change the rectangular background of the note “Compare products” in the shop from black to orange #fe8409. A picture is attached. What is the CSS code for it?

Thanks in advance…

Hello,

Thank you very much for choosing our theme and for contacting us.

Please add this code to the Theme Settings > Custom CSS > Global:

.woodmart-compare-btn .woodmart-tltp .woodmart-tooltip-label {
    background-color: red;
}
.woodmart-compare-btn .woodmart-tltp .woodmart-tooltip-label:before {
   border-left-color: red;
}

Best Regards

Hello,

fantastic. Thanks alot. But I still have one question. The information currently appears on the left. Would it also be possible to have the information appear on the right side of the compare-button? With more CSS code?

Thanks in advance…

Hello,

Your site is under construction. I cannot check how it is now. I am checking on our demo, if we put it on the right, it would overlap the next product item. is it what you need? Please provide the screen on how you would like to move.

Best Regards

Hello Elise,
here is my wish in a PDF with two pictures. Notice the shadow.

Thank you…

Hello,

Seems you have not attached the PDF files. Try to attach screens or provide your site admin access.

Best Regards

Hello Elise,
here is my wish in a jpg with two pictures. Notice the shadow of the compare symbol in the picture. It is to the other side.

Thank you…

Hello,

Please provide your site admin access we cannot view as your site is under construction.

Best Regards

See the private content…

Hello,

I am a bit confused with the credentials please https://prnt.sc/v9wte3 please provide the access step by step with the instruction.

Best Regards

Sorry. You can now find the explanation in the private area.

Hello,

Here is the email: [email protected] please send all the information here.

Best Regards

Hello Elise,
I have set up the mail in the backend and also sent the data to you via mail.

Best Regards

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-list-item .woodmart-buttons.wd-pos-r-t {
  position: absolute;
  right: auto;
  left: 10px
}
.product-list-item .woodmart-buttons[class*=wd-pos-r] {
  opacity: 0;
  -webkit-transform: translateX(-20px) translateZ(0);
  transform: translateX(-20px) translateZ(0);
}
.product-list-item.product-grid-item:hover .woodmart-buttons[class*=wd-pos-r] {
  -webkit-transform: translateY(0) translateZ(0);
   transform: translateY(0) translateZ(0);
}
.product-list-item .woodmart-buttons[class*=wd-pos-r] .woodmart-tooltip-label {
   right: auto;
   left: 100%;
   margin-right: 0;
   margin-left: 8px
}

Best Regards

Fantastic! Thanks alot. You are the best!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts