Custom product cards (Card Global Section)

You want the products in a grid to follow your own design, with the photo, the name, the price and your own buttons placed where you want them. A Card global section is that design. You build one product card in Elementor, connect its elements to the product with dynamic tags, and Rey repeats the card for every product in the grid.

The steps below need Rey 3.4 or newer. The Card global section is on by default, so there is nothing to switch on.

Create the card

1. Go to Rey › Global Sections and click Add New.
2. Give it a name you will recognise, for example Product card.
3. In Choose Type, pick Card.
4. Click Publish, then Edit with Elementor.

Keep the card published. A card left as a draft is not shown on the site.

The Elementor canvas is as wide as your screen, while a card in a grid is usually around 300px wide. In the editor, open Settings (the gear icon) and set Preview Size to the width of one card, so you build it with the real proportions.

Show the card in a product grid

In a Products element on a page

1. Add the Products (Grid & Carousel) element to the page.
2. Open the Style tab › General Styles.
3. Set Product Item Skin to Loop Template (Card Global Section).
4. In Select Loop Template, pick your card.

This works with the element’s Default and Carousel skins. Leave Select Loop Template empty and the element uses the card chosen for the shop, below.

In the shop and category pages

1. Go to Rey › Settings › WooCommerce › Catalog › Product Card.
2. In Product Layout, set Product Skin to Loop Template (Card Global Section).
3. In Select Card Global Section, pick your card.

The shop, the category pages and every Products element whose Product Item Skin is left on its default now use the card.

Fill the card with product data

Build the card like any Elementor layout, then connect each element to the product with a dynamic tag. Click the dynamic tags icon next to a field and pick a tag from the WooCommerce (rey) group. Leave the tag’s Select Product empty. Empty means the product the card is showing, which is what you want in a card.

To link the Image, set its Link to Custom URL first, then use the dynamic tags icon in the URL field.

Product Price shows a single number. For a variable product it is the lowest price of its variations. Its Price type option shows the regular or the sale price instead of the current one.

Inside the card editor the tags show placeholders such as {Product Title} and the WooCommerce placeholder image, because the card is not tied to a product there. The real data appears on the page, and in the editor of the page that holds the grid.

The full list of tags is in Dynamic Tags for Elementor.

Add an Add to Cart button

Use a normal Button element, so you can style it like any other button.

1. Add a Button to the card and give it a text, for example Add to cart.
2. Open Add To Cart Settings and turn on Enable Add To Cart Link.
3. Leave Select Product empty. The button then adds the product of the card it sits in.

The Link field disappears when this is on, because the button builds its own link.

What a click does depends on the product.

• A simple product in stock is added without leaving the page. Rey then does what your shop does after any add to cart, for example opening the cart panel.
• A variable product needs a choice first, such as a size, so the button opens the product page. To show the choices in a pop-up instead, turn on Ajax Variations Form Pop-up in Rey › Settings › WooCommerce › Catalog › Product Card.
• A product that is out of stock opens its product page.

Adding without leaving the page needs Enable AJAX add to cart buttons on archives, in WooCommerce › Settings › Products. It is on by default. With it off, the page reloads and the product is added.

Two more settings sit in the same panel.

• Redirect to checkout? adds the product and sends the visitor straight to the checkout, which makes it a “Buy now” button.
• Custom “Added to cart” text replaces the button text for ten seconds after the product is added. Leave it empty and the text does not change.

Add a Quick View button

1. Add another Button to the card, with a text such as Quick view.
2. Open Trigger Settings and set Action to Open Product Quickview.
3. Leave Select Product empty, for the same reason as above.

The panel that opens is the shop’s own Quick View, with the options from Rey › Settings › WooCommerce › Catalog › Product Card › Quickview.

In the Elementor editor the button does not open anything. Test it on the page.

Rey’s own product cards show Quick View only on larger screens. To do the same with your button, open its Advanced tab › Responsive and turn on Hide On Mobile Portrait.

Add a Wishlist button

The heart has two states, saved and not saved, and it remembers what each visitor saved. A plain Button cannot do that, so Rey provides the heart as a dynamic tag.

1. Add a Text Editor element to the card.
2. Click the dynamic tags icon of its text field and pick Product Wishlist Button (Loop).
3. Leave Select Product empty.

The heart takes the Text Color of the element, so you can colour it from the element’s Style tab. Its size is set by Rey.

The heart follows the wishlist settings in Rey › Settings › WooCommerce › Features › Wishlist. If Enable Wishlist is off, or Enable button under Catalog is off, the tag prints nothing.

On phones, Rey hides the heart inside product cards, and Enable button on mobile does not change that for a card. To show it, add this line in Rey › Settings › Additional CSS.

li.product .elementor-widget .rey-wishlistBtn { display: inline-block; }

Three things worth knowing

The card replaces the whole product item

Rey’s own parts of a product card, such as sale badges, colour swatches, the Quick View button and the wishlist heart, are not added to a Card global section. The card shows only what you put in it.

Visitors can see an old version of the card

When the grid uses Lazy Load with Cache Ajax Response? turned on, which is the default, Rey keeps the loaded grid for up to two days. Administrators always get a fresh one, so you see your change while visitors still get the previous card. After you edit the card, open the Rey menu in the admin bar and click Refresh › Ajax Cache.

Copied button code does not work

If you paste the HTML of a Quick View or wishlist button into the card, for example in an HTML element, the button shows but does nothing. Rey loads a button’s scripts only when it prints that button itself. Use the Button settings and the tag above, or the PHP below.

Example card with a photo, a name, a price and three buttons

1. Create a Card global section named Product card and set Preview Size to 300px.
2. Add a Container. Inside it, add an Image with the Product Image tag, and set its Link to Custom URL with the Product URL tag.
3. Below it, add a Heading with the Product Title tag, linked with Product URL.
4. Add a Text Editor with the Product Price tag.
5. Add a second Container set to a row. Put three elements in it. A Button Add to cart with Enable Add To Cart Link on, a Button Quick view with Action set to Open Product Quickview, and a Text Editor with the Product Wishlist Button (Loop) tag.
6. Publish the card.
7. On your page, add Products (Grid & Carousel), and in Style › General Styles set Product Item Skin to Loop Template (Card Global Section) and Select Loop Template to Product card.
8. Open the page in a private window, as a visitor would. Add a product to the cart, open a Quick View, save a product to the wishlist and reload the page. The heart stays filled.

Use a card for posts and other content

The same Card global section also works in Rey’s Grid and Carousel elements, for posts, pages, custom post types, categories or your own items. Pick the content in Content › Data Source, then open Style › Layout, set Select Layout to Card Template (Global Section) and pick the card in Choose Card Template. Build that card with the tags of the Post (rey) group instead of the WooCommerce ones.

Turn on Load CSS early only when the element is at the top of the page. It loads the card’s styles in the page head, so the cards do not flash unstyled while the page loads.

For developers

Buttons in a card built in PHP

If your card prints its own markup, for example through a shortcode, print the buttons through WooCommerce and Rey, so their scripts load with them.

add_shortcode( 'my_card_buttons', function () {
	ob_start();
	woocommerce_template_loop_add_to_cart();
	do_action( 'reycore/woocommerce/loop/quickview_button' );
	do_action( 'reycore/woocommerce/loop/wishlist_button' );
	return ob_get_clean();
} );

Add a Shortcode element with [my_card_buttons] to the card. Each button follows the shop’s settings, so a feature that is turned off prints nothing.

In a grid with Lazy Load, keep Enable AJAX add to cart buttons on archives on in WooCommerce › Settings › Products. WooCommerce builds its button’s link from the request that loaded the grid, and that link only works through Ajax.

Put this code in the child theme’s functions.php or in a snippets plugin, never in the parent theme.