[Resolved] Floating Trust Badge on Bottom, Animation on Scroll

[Robert]

Hi!

I want to add a “sticky, floating” trust badge like Trusted Shops at the bottom of every WooCommerce page. The trust badge graphic is actually an HTML code that updates the number of review stars. It is also linked to the trust portal, e.g. trustedshops.com.

The bagde should stay at the same viewpoint at all times, bottom right. It should only be visible on desktop.

Unfortunately, adding a sticky section to the global footer with Elementor theme builder interferes with sticky cart bottom panel.

Appreciate your ideas!

Robert

[David]

Hi there,

you can try adding it to the site using a GP Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

The after_footer hook would be a good place to add it.
We can then provide some CSS to position it.

[Robert]

Hi David!

Thanks! The badge should have a fixed (‘sticky’) position: horizontally aligned right & vertically centered. Delayed follow on scroll would be bonus. How can that be achieved (with CSS)?

Cheers,

Robert

[David]

Can you add the Element to the site so i can see what CSS is required.

[Robert]

You will be able to view the element here: <li>https://casimum.de/shop/</li>

[Tom]

Hi there,

Something like this?:

#shopauskunft-widget_wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

[Robert]

Hi Tom,

Thanks! I ended up using (relative) vertical centering:

#shopauskunft-widget_wrapper {
position: fixed;
top: 80%;
right: 1%;
z-index: 1;
transform: translate(0%, -50%);
}

Do you know the animation CSS to make it slide in from off right on page load, 2 sec. delay?

Cheers,

Robert

[David]

You can apply the CSS option provided on this stackoverflow:

https://stackoverflow.com/a/11681331

[Robert]

Thank you, David!

[David]

Glad we could be of help

[Author]

Posts