Adding a WooCommerce product into an off-canvas content modal

[mmelton12]

Hi!

I’m stumped here. I would love to display one product in an off canvas content area modal… The product I am selling has two variants, so user selects variant, then adds to cart.

The page woocommerce generates is correct, but I haven’t seen that the woocommerce short-code can output a product with variant selection and dropdown… That said I don’t see a way to add that page into a modal, with the exception of simply loading it into the modal via iframe. The only concern I have here, is the insane amount of additional and duplicate code that the pro-theme creates in the iframe page.

Thanks,
Matt

[kory]

Howdy, @mmelton12!

Thanks for writing in. If I’m understanding what you’re wanting to do correctly, you have a single product with a couple variants that you’d like to place statically into a Off Canvas Content Area and have users select the product variant from there to add to cart, correct? In looking through WooCommerce’s documentation, it would seem that the [products] shortcode is your best bet to explore:

Shortcodes included with WooCommerce - WooCommerce Docs

I didn’t see anything specifically in the documentation that seemed to indicate a way to get the variant dropdown to show directly (because I believe this shortcode is effectively uses the same code for creating the “index” views of the shop), but I did come across this thread online that seemed to point in a possible direction:

Variable Product Shortcodes

You should apparently be able to reference a specific product’s variant by passing in a specific ID or SKU. Again, this doesn’t seem to get you a single output with a dropdown as you mentioned, but you could at least reference both variants individually and style the Off Canvas Content Area accordingly.

Hopefully that helps to point you in the right direction, cheers!

[mmelton12]

Thank you for the help. I am close to a solution- Global block with a product shortcode + some additional custom code in functions.php to address variants, and then global block shortcode embedded in modal. Just tweaking the custom code, but this works!

[christopher]

Glad that we could give you a head start for your research.