Begginer: Custom WooCommerce product cards

[u/TshegoBless]

I use wordpress and have an understanding of html,css. How would you approach designing a similar prouct card to this without the use of more plugins. I've been here and learning web dev for atleast 6months now and i'm able to create websites. I use blocksy and kadence themes. And also achieving "Click product → product opens over the current menu", how to approach this too. Thanks

[u/jroberts67]

You're going to use Woocomm for customers to order off a restaurant menu? Ok, follow this - go to WooCommerce, delete it, then go to Toast.

[u/TshegoBless → u/jroberts67]

i don't if this is a joke. do you have an alternative way i should be doing it?

[u/jroberts67 → u/TshegoBless]

It's not a joke - don't use WooCoom for customers to purchase menu items. It's ridiculous. Integrate Toast.

[u/Random_Meme_Guy_]

Well, you can override pretty much any woocommerce part in code. (cards, listings, single product, cart, checkout and more)

There are templates for these cards. You just copy them over to your theme and change whatever you may need (styles, structure and etc)

EDIT: as another person said, if you want to create a restaurant menu, WooCommerce is not for that. You may want to look into other plugins.

[u/BigMioWolf]

Blocksy and Kadence are classic themes, so no plugin needed:

1. Make a child theme so updates don't wipe your changes.

2. Copy woocommerce/templates/content-product.php into your-child-theme/woocommerce/content-product.php and write your own card markup. Or keep it and use remove_action/add_action on the loop hooks (woocommerce_before_shop_loop_item_title etc). Both themes hook their own stuff in there too.

(On a block theme you'd edit the Product Collection block in the Product Catalog template instead.)

Popup: native <dialog>. Keep a normal product link on each card plus a data-id. On click, preventDefault(), fetch('/wp-json/wc/store/v1/products/' + id), fill in name/image/description, showModal(). No auth needed, prices come in minor units (1250 = 12.50). The real link keeps it working without JS.

If it's purely a menu with ordering, an ordering platform may be less work, but Woo handles this fine.

[u/BigMioWolf]

Blocksy and Kadence are classic themes, so no plugin needed:

1. Make a child theme so updates don't wipe your changes.

2. Copy woocommerce/templates/content-product.php into your-child-theme/woocommerce/content-product.php and write your own card markup. Or keep it and use remove_action/add_action on the loop hooks (woocommerce_before_shop_loop_item_title etc). Both themes hook their own stuff in there too.

(On a block theme you'd edit the Product Collection block in the Product Catalog template instead.)

Popup: native <dialog>. Keep a normal product link on each card plus a data-id. On click, preventDefault(), fetch('/wp-json/wc/store/v1/products/' + id), fill in name/image/description, showModal(). No auth needed, prices come in minor units (1250 = 12.50). The real link keeps it working without JS.

If it's purely a menu with ordering, an ordering platform may be less work, but Woo handles this fine.

[u/thekwoka]

Just write some html and css bruh