This is a good UI/UX design for call Customers to do their action buying from a shop. Moreover, you don’t need any plugin to make it. The only one you use is Elementor pro. So I don’t want to waste more time, let do it together.
In this example, I designed my single product page by Elementor theme builder. If you did design single product page like me, please go to Templates >> Theme Builder >> Single Product >> Click Edit on Layout.
If you didn’t design yet, you can make yourself one. You can also add an anchor point on header but remember to turn off the stick header. In my case, I want to have the stick header so the best choice for me is to add an anchor point on the section.
Click to the Section >> Advanced >> CSS ID >> type “topscroll“.
After adding the anchor point remember to update. Now, we can close and move to the next step that is creating a back-to-top button.
2/ Creating Back to top button
Go to Template >> Popup >> Click add new button on the top >> Make a popup a name. I name it is “Popup Scrolling” >> Click the “Create Templates” button. After go in you can see the popup template showing, simply just click close it. We will create it manually.
Click popup setting icon in the bottom right corner like the picture below.
Popup Setting Tab:
Width: 100px
Height: Fit to content
Position: Horizontal right, Vertical Middle
Overlay: Hide
Close Button: Hide
Style Tab:
Background color: transparent
Box Shadow: transparent
Advanced Tab:
Prevent Closing on ESC key Active
Add Feature Image:
After you have all the settings above, click on the Elementor menu and select the “Feature image” module drag it into the section popup we just created.
Setting Feature Image:
Content Tab
Image Size: thumbnail – 150×150
Alignment: center
Link: Custom URL and type “#topscroll” to scroll to the anchor point.
Advanced Tab
Scrolling Effects: On
Horizontal Scroll: Direction to Left, Speed 6, Viewport 0% – 50% from the bottom.
Transparency: Direction “Fade in”, Level 15, Viewport 0%-60% from the bottom.
Effects Relative To: Entire Page
Add button price:
Click on the Elementor menu and select the “Button” module drag it into the section popup we just created under the feature image. This button will show the price of the product.
Setting Button:
Content Tab
Text: Select Dynamic icon and choose Woocommerce Price
Link: #topscroll
Alignment: Justified
Size: Extra Small
Icon: none
Style Tab
Text color: white
Background color: black
Border Radius: zero
Advanced Tab
Scrolling Effects: On
Horizontal Scroll: Direction to Left, Speed 6, Viewport 0% – 50% from the bottom.
Transparency: Direction “Fade in”, Level 15, Viewport 0%-60% from the bottom.
Effects Relative To: Entire Page
Adjust Column Popup:
After finish all settings for the Feature image and button above. Then click on the column >> Select Widgets Space (px) = 0 to remove space between feature image and column.
This is the final popup after remove Widgets Space
3/ Setup Condition for Popup:
This is the final step, Click the save button and add conditions to the popup.
Conditions: Include > Woocommerce >> Products. This condition will show for all products.
Triggers: On Page Load >> Activate >> within (sec) = 0. This will trigger the popup showing but hidden by affect.
After finish, When you go to any product page and scrolling, you will see the popup with the image and price show up. then when you click it will scroll to your anchor point.
That’s it:
I hope you see this is helpful and cool. The popup is nice for reminding customers to click to buy. You can try this method with your own effect and be more creative.
