Free gifts widget collapse option or shown as grid
- This topic has 1 reply, 2 voices, and was last updated 2 days, 17 hours ago by
.
-
Posts
-
Hello,
First of all, I’d like to thank you for the great work that you’re doing. The theme is great and so is the support.
Now I’d like to raise a UI/UX issue for me and also for other and future users. The theme offers a great free gifts solution which is more than enough for most. However, the only way to enable it is via the elementor widget “Free gifts”. Or at least this is the only I managed to show it on page.
But the logic of this feature is to be shown above cart summary, to provide an extra and final incentive for the user to checkout, and the elementor widget does more harm than helps, because it lists each gift option, so it moves the cart summary below the fold on desktop (if you offer al least 3 gift options), totally or partially, and on mobile, where conversion is nowadays, it moves the CTA button “Proceed to checkout” 2 screens below the first screen visible.
More friction and confusion is added by the fact that each product has it’s own “add to cart” button, and these buttons are not dinamically hidden / blocked when the specified number of gifts is/are added to cart.
Imagine that you navigate in a shop on mobile, add products of a total value X in cart, go to the cart page and there you see (let’s say) 3 different products, each with an add to cart button, occupying the whole above the fold screen. If you see the “Choose your gifts” message (another confusion as the theme automatically sets the plural if it counts more than one product) and start tapping on “add to cart” buttons, only to find out that you’re limited to one gift, it will generate frustration and a sentiment of deception like “you say you give them all only to offer one”. Or you’ll get confused right away by these products looking like a list of upsells or something, but you thought you’re on the cart page and all you want is to go quickly through it to the checkout page.Now the proposed solution.
I tried to create an elementor accordion with a title and the products dinamically added via shortcode through the html code option of the “content” section. It doesn’t work.
I tried then to add a html block with these products (added also via a shortcode widget in the html block) but it doesn’t work as the shortcode widget does not read the free gifts widget.
I tried the to add the free gifts widget in a html block and the add the html block as content in the accordion widget element, but in the html block i can’t find the free gifts widget (it seems to be locked only to the cart page).
Then i tried to leave the free gifts widget on the page, hide it via custom css, and recreate the widget via a php, js and css code, but i couldn’t make it work.
Finally, i thought that changing it to grid is the easiest solution to occupy less space and those cta buttons for each product have a logic, like each product has it’s own add to cart button in a carousel, and i wrote the following code which also did not work: https://pastebin.com/fYBQfT9sSo my request for my own case is to offer me the code solution for which one of the following is easier to be done:
1. Collapse the widget and expand on hover / click (ideally with only one CTA button for all products).
2. Change the layout to grid, like in a carousel, similar to what i tried to do using that code.
3. Offer the possibility to integrate the products in other places / widgets via shortcode or woocommerce hook.And i think it would be great and benefial for all users, in the future, if a collapsable solution is available, as mobile is the definitive “battleground” and every px matters.
Thank you and looking forward to your solution.
