Skip to main content

How to use the Foxiz Product Block in Elementor

The Foxiz - Grid Products block shows WooCommerce products on an Elementor page. You tell it which products with a WooCommerce shortcode, and set the columns with the block's own settings. WooCommerce has to be active for the block to show anything.

A Foxiz - Grid Products block on the Chronograph demo's shop page, outlined in orange, under the Our Bestsellers heading: three watches, each with its category, name and price, a -20% badge and the old price struck through on the one on sale, and a button under each card: Buy Now, Add to cart and Learn More

The shop shortcode to use​

[products limit="5" orderby="popularity"]

This shows five products, best sellers first. Copy it for now. The next section adds the block, and its step 5 pastes this into the WooCommerce Shortcodes field, in Content > Query Settings, over the [products limit="4"] a new block already holds.

Leave columns, class and paginate out: this block ignores them. Columns are set on the Layout tab instead.

More ready-made shortcodes (newest, on sale, one category) are in Shortcodes to copy. Every option is in WooCommerce's guide: WooCommerce shortcodes.

How to add this shortcode to Homepage​

To add this shortcode to your homepage, follow these steps:

  1. Navigate to Pages > All Pages.

  2. Select a page you would like to edit or add a new page, and click on the "Edit with Elementor" link.

    The Contact row on Pages > All Pages with its row actions showing, and Edit with Elementor outlined in orange at the end of Edit, Quick Edit, Trash, View and Duplicate This

  3. The Elementor editor opens. In the search box at the top of the left panel, type Grid Products. product, shop and woocommerce find it too.

    The Elementor Elements panel with Grid Products typed into the search box, and Foxiz - Grid Products in the results, outlined in orange

  4. Drag Foxiz - Grid Products onto the page.

  5. Paste your shortcode into the WooCommerce Shortcodes field, over the [products limit="4"] that is already there.

    The Query Settings section of Foxiz - Grid Products, with a WooCommerce shortcode typed into the WooCommerce Shortcodes field

  6. Click on the "Publish" button.

Responsive Columns​

  1. In the Elementor editor, click the block you would like to edit.

  2. Select the Layout tab.

  3. Set Columns on Desktop, Columns on Tablet and Columns on Mobile. Desktop and tablet go up to 7, mobile up to 2. For most shops, 4, 3 and 2.

    The Columns section on the Layout tab of Foxiz - Grid Products: Columns on Desktop 4 Columns, Columns on Tablet 3 Columns and Columns on Mobile 2 Columns, each outlined in orange, above Column Gap

  4. Leave Column Gap as it is, unless you want more or less space between products. Then pick Custom Value and type a number in 1/2 Custom Gap Value, per device. As the name says, it is half the gap: 10 gives 20 pixels between two products.

Responsive Layout​

  1. In the Elementor editor, click the block you would like to edit.

  2. Select the Layout tab > Layout > Mobile Layout.

    The Layout section on the Layout tab of Foxiz - Grid Products with Mobile Layout set to List, outlined in orange, which reveals List - Image Width (empty, 150 hint) and List - Image Position on Left

  3. Pick Grid (the default) or List (the picture beside the text). Desktop Layout and Tablet Layout are in the same section. For most shops, keep Grid.

    List adds two fields: List - Image Width and List - Image Position.

    The Chronograph demo's bestsellers on a phone in the List layout, outlined in orange: each watch's picture beside its name and price

Tablet/Mobile Horizontal Scroll​

  1. In the Elementor editor, click the block you would like to edit.

  2. Select the Layout tab > Tablet/Mobile Horizontal Scroll > Horizontal Scroll.

    The Tablet/Mobile Horizontal Scroll section on the Layout tab of Foxiz - Grid Products: Horizontal Scroll on Tablet & Mobile, outlined in orange, and Tablet - Post Module Width and Mobile - Post Module Width empty with their 300 hint

  3. Pick the devices where the row scrolls sideways instead of wrapping: Tablet & Mobile, Tablet Only or Mobile Only. - Disable - is the default.

    Tablet - Post Module Width and Mobile - Post Module Width set each product's width in pixels. Left blank, a product takes 40% of the screen on tablet and 70% on mobile, so the next one peeks in.

    The same row on a tablet with Horizontal Scroll on, outlined in orange: the watches in one sideways row, the next one cut off at the right edge

Add Offset​

Foxiz adds an offset option to WooCommerce's shortcode. [products limit="4" offset="4"] skips the first four products and shows the next four: two rows on one page, with no product shown twice.

It works on a plain [products] only, not together with on_sale, best_selling or top_rated, even though the field's grey example pairs on_sale with offset.

The WooCommerce Shortcodes field holding a shortcode with an offset parameter added

Related Articles