Page with hyperlinks to add to cart product links

Hi there, I have managed to do something with CSS to attack this but I am by no means a CSS guru and it is a bit hacky.

In the product post I have

This is a inline link to a product for a  
<div class="DivProductOutter">product name
<div class="DivProduct">
<div>[product id="183069"]</div></div></div>

In the CSS for the theme I have added :

div.DivProduct div {display:none;}
div.DivProduct{display:inline;position:absolute;padding:60px;left:-10px;top:-20px;}
div.DivProduct:hover div{display:inline-block;position:absolute;width:700px;height:1700px;}
div.DivProductOutter{display:inline;position:relative;color:#58aa57;}
div.DivProductOutter:hover{color:#037ac6;}

Finally in the functions.php I needed to add this to stop <P> tags generating in my posts which were stopping my product links from appearing in-line.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

I suspect this is suboptimal but I thought I would at least get the ball rolling with a solution.

Hi @growinsane –

That’s certainly one way to do it! ?? You might look at some of the modal pop up plugins for WordPress. You might be able to use some sort of HTML modal in conjunction with the core WooCommerce shortcodes.

I’ve gone and had a look but couldn’t find anything quite right, most seem to orientate around forced interaction which isn’t quite what I wanted.
This is what I have working now , it’s just a one line page but you can see as you hover over the text and you get a small add to cart dialog which disappears if your cursor goes too far. I wanted to make the add to cart cary a quantity selector but none that I’ve tried worked properly within the shortcode functionality:

https://www.growinsane.com/beginnersirrigationguide/

The reason for the nested div was to create that larger invisible hover zone or it becomes too easy to move the cursor slightly away and lose the product dialog.

@growinsane As mentioned above, this is pretty custom. If you have found a solid solution, you may want to seek help of a developer. We recommend the resources here: https://woocommerce.com/customizations/

@growinsane We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.