Standard WooCommerce category grids are functional but often boring. Sometimes you want to highlight specific categories with custom graphics that don’t match your store’s default thumbnails.

To solve this, use Div Render Container Slider for Elementor to build a curated category rail.

Step 1: Building the Cards

Create a parent Container. Inside, create manual child containers for your top categories (e.g., “Men”, “Women”, “Accessories”).
Use background images for each container and place a Button or Heading widget on top to link to the category archive.

Step 2: Slider Configuration

Enable Slider Mode.

  • Slides Per View: Set to 4 or 5 depending on your layout width.
  • Grab Cursor: Toggle this to Yes. This mimics the feel of a native mobile app where you drag to browse categories.

Pro Tips for Categories

  • Free Mode: If available, enable Free Mode. This allows users to flick through the categories quickly without snapping to each one, which is great for browsing lists.
  • Hide Scrollbar: Keep the UI clean by disabling the scrollbar and relying on the “Grab” interaction.