Hayes: Display Shop the Post widget statically in Classic Feed Layout

When the Classic Feed layout is enabled in the Hayes theme, and paired with our Shop the Post plugin, the corresponding shopping widget will appear over the entry summary content on hover. The default animation looks like this:

Some customers may wish to statically feature the Shop the Post widget, so that users do not have to hover over the call to action in order to view the products. Below are three Code Hacks that allow you to edit this feature so your widget may be statically displayed.


Below is a visual of the Code Hack in action:

IMPORTANT NOTE: We've included code for you to adjust how much space is at the top of the entry summary. For customers who tend to write long post titles, and/or have a longer post excerpt, you may wish to reduce the margin further, so that your Shop the Post widget does not display too closely to the next post in the feed. The default top margin setting is 50px; we reducing it to 30px and seeing how it looks. In the example above we reduced it further to 15px.

Additionally, some customers may wish to hide the "Shop" call to action, since the button is no longer functional and does not trigger any animation. Here is what this part of the Code Hack looks like, in action:


All pieces of code are included in the snippet below. If you do not wish to hide the Shop call to action button, simply omit the third part of the code, where indicated.