WooCommerce: Combining Product Settings and Shortcodes

Leave a Comment / Knowledge base / By

Why Configure Product Settings and Display Products on Your Homepage?

  • Product Settings: These control how products are measured, displayed, inventoried, and downloaded, creating a seamless shopping experience.
  • Homepage Products: Featuring products upfront highlights bestsellers, sales, or new arrivals, driving engagement and conversions.
  • Analytics with UTM: Tracking homepage product performance with UTM parameters helps you understand visitor behavior and optimize campaigns.

Let’s start by setting up your store’s product framework, then add products to your homepage and track them effectively.

Part 1: Configuring WooCommerce Product Settings

The Product Settings tab in WooCommerce lets you fine-tune how products function and appear. Here’s how to set it up under the four submenus: General, Display, Inventory, and Downloadable Products.

Step 1: Navigate to Product Settings

  1. Log in to your WordPress Admin Panel.
  2. Hover over WooCommerce in the sidebar and click Settings.
  3. Select the Products tab. You’ll see submenus: General, Display, Inventory, and Downloadable Products.

Step 2: General Settings

These settings cover measurements and reviews.

  • Measurements:
    • Weight Unit: Choose how product weights are measured (e.g., kilograms, grams, pounds). Match your shipping needs.
    • Dimensions Unit: Set dimensions (e.g., centimeters, meters, yards). Align with your product types (e.g., inches for furniture).
  • Reviews:
    • Check Enable Ratings on Reviews to allow star ratings with reviews.
    • If enabled, additional options appear:
      • Ratings Required: Mandate a star rating for reviews.
      • Show “Verified Owner” Label: Display a badge for reviews from confirmed buyers.
      • Only Allow Reviews from Verified Owners: Restrict reviews to customers who purchased the product.
  • Save Changes: Click Save Changes to apply.

Step 3: Display Settings

These control how products appear on your shop and product pages.

  • Shop Page:
    • Select a page to display your products (e.g., “Shop”). If you used WooCommerce’s onboarding wizard, this may already be set.
  • Shop Page Display:
    • Choose what appears on the shop page:
      • Show Products: Only products.
      • Show Categories: Only categories.
      • Show Categories and Products: Both.
  • Default Category Display:
    • For category pages, select:
      • Show Products: Products only.
      • Show Subcategories: Subcategories only.
      • Show Subcategories and Products: Both.
  • Default Product Sorting:
    • Set how products sort by default:
      • Default Sorting: Custom order plus product name.
      • Popularity: By sales.
      • Average Rating: By reviews.
      • Most Recent: Newest first.
      • Price (Low to High or High to Low): By cost.
  • Add to Cart Behavior:
    • Check Redirect to Cart Page After Adding: Sends users to the cart after adding a product (ideal for small catalogs).
    • Check Enable AJAX Add to Cart Buttons: Adds products without refreshing the page, encouraging continued shopping.
  • Product Images:
    • Set image sizes to match your theme for clarity:
      • Catalog Images: For shop/archive pages (grids).
      • Single Product Image: For individual product pages.
      • Product Thumbnails: Small images below the main product image (gallery).
    • Upload high-resolution images (e.g., 900×900 pixels for full-screen lightboxes). Check your analytics for common screen resolutions to guide sizes.
    • If your theme supports it, enable Image Gallery features (arrow navigation, zoom, lightbox).
  • Save Changes.

Step 4: Inventory Settings

These manage stock tracking (skip if you don’t track inventory).

  • Enable Stock Management: Check to track stock per product.
  • Hold Stock: Set how long to hold stock for unpaid orders (e.g., 10,080 minutes = 7 days). Leave blank to disable.
  • Notifications:
    • Check Enable Low Stock Notifications and Out of Stock Notifications.
    • Set a Notification Recipient (email address).
  • Thresholds:
    • Low Stock Threshold: Trigger notifications when stock hits this level (e.g., 10 units).
    • Out of Stock Threshold: Define “out of stock” (e.g., 0).
  • Visibility:
    • Check Hide Out of Stock Products to remove them from the shop.
  • Stock Display Format:
    • Choose:
      • Always Show Stock: Display quantity (e.g., “12 in stock”).
      • Only Show When Low: Show stock only below the threshold.
      • Never Show Stock: Hide stock counts.
  • Save Changes.

Step 5: Downloadable Products Settings

These apply to digital products like eBooks.

  • File Download Method:
    • Force Downloads: Secure but may timeout for large files.
    • X-Sendfile: Reliable and secure (requires server support).
    • Redirect Only: Least secure; links can be shared.
  • Access Restriction:
    • Check Require Login: Users must log in to download (bypassed if guest checkout is enabled).
    • Check Grant Access After Payment: Allow downloads once payment is processing.
  • Save Changes.

Part 2: Adding Products to Your Homepage with Shortcodes

With your product settings configured, you can now display products on your homepage using WooCommerce’s shortcodes, which work with any page builder (Gutenberg, Elementor, etc.).

Step 1: Edit Your Homepage

  1. Go to Pages > Edit your homepage (or create one).
  2. Open your Page Builder or Customizer if your theme controls the homepage.
  3. Choose where products will appear (e.g., under a banner or in a “Featured Items” section).

Step 2: Add a Shortcode Widget

  1. Add a Shortcode Widget (or Shortcode Block in Gutenberg) to your desired spot.
    • No shortcode widget? Use a Text Editor Widget and paste the code.
  2. Click into the widget to enter your shortcode.

Step 3: Use Basic Shortcodes

Start with a simple display.

  • Show Products:
    • Example: Display 8 products in 4 columns: textCollapseWrapCopy[products limit=\"8\" columns=\"4\"]
  • Preview and Adjust:
    • Save and check your homepage. Try [products limit=\”4\” columns=\”2\”] for a smaller grid.

Step 4: Customize Displays

Leverage your Product Settings (e.g., sorting, categories) to refine displays:

  • By Category (from Shop Page Display):
    • Example: Show “Home Decor” products: textCollapseWrapCopy[products limit=\"8\" columns=\"4\" category=\"home-decor\"]
    • Use the category slug (check Products > Categories).
  • New Arrivals (sort by Most Recent):
    • Example: textCollapseWrapCopy[products limit=\"8\" columns=\"4\" order=\"DESC\"]
  • On-Sale Products:
    • Example: textCollapseWrapCopy[products limit=\"4\" columns=\"4\" on_sale=\"true\"]
  • Popular Products (sort by Popularity):
    • Example: textCollapseWrapCopy[products limit=\"6\" columns=\"3\" orderby=\"popularity\"]
  • Featured Products:
    • Example: textCollapseWrapCopy[featured_products limit=\"4\" columns=\"4\"]

Step 5: Style and Test

  • Style: Use your builder to adjust margins, headings (e.g., “Shop Now”), or image sizes (aligned with Product Images settings).
  • Test:
    • Click products to ensure links work.
    • Verify AJAX cart or redirects (per Add to Cart Behavior).
    • Check reviews display if enabled.
  • Mobile: Confirm responsiveness.
  • Save/Publish.

Part 3: Tracking Homepage Products with UTM Parameters

To measure how your homepage products perform, use UTM parameters in your shortcode links for analytics tracking (e.g., in Google Analytics 4).

What Are UTM Parameters?

UTM tags are URL extensions that track traffic sources, campaigns, and more. They include:

  • utm_source: Traffic origin (e.g., homepage).
  • utm_medium: Channel (e.g., website).
  • utm_campaign: Specific campaign (e.g., winter_sale).

Why Use UTM for Homepage Products?

  • Track Clicks: See which products get the most attention.
  • Measure Conversions: Monitor add-to-cart or purchase rates.
  • Optimize: Identify top-performing displays to refine your homepage.

How to Track with UTM

  1. Create UTM Links:
    • Use Google’s Campaign URL Builder or tools like Bitly.
    • Example: For a product link (https://yourstore.com/product/mug/), add UTM tags: textCollapseWrapCopyhttps://yourstore.com/product/mug/?utm_source=homepage&utm_medium=website&utm_campaign=featured_products
  2. Apply to Shortcodes:
    • WooCommerce shortcodes don’t directly support UTM tags, so wrap them in custom links:
      • Add a Custom HTML Block in your builder.
      • Create a grid with links like: textCollapseWrapCopy<a href=\"https://yourstore.com/product/mug/?utm_source=homepage&utm_medium=website&utm_campaign=featured_products\">Mug</a>
      • Alternatively, use a plugin like WooCommerce Product Slider to embed UTM-tagged links.
  3. Track in Google Analytics 4:
    • Go to Reports > Acquisition > Traffic Acquisition.
    • Filter by utm_source=homepage or utm_campaign=featured_products.
    • Analyze clicks, conversions (e.g., add-to-cart events), and bounce rates.
  4. Other Tools:
    • Use platforms like HubSpot, Mixpanel, or Meta Ads Manager if integrated.

Where to Track

  • Google Analytics 4: Primary tool for UTM data under Acquisition reports.
  • WooCommerce Analytics: Check Products > Analytics for sales tied to UTM campaigns (requires linking).
  • Marketing Platforms: Email or ad tools (e.g., Mailchimp, Google Ads) if you promote homepage links externally.
  • Custom Dashboards: Use Google Looker Studio to visualize UTM performance.

Combining Product Settings with Homepage Displays

Your Product Settings enhance homepage displays:

  • Images: High-quality catalog images make grids pop.
  • Reviews: Verified owner badges build trust in product listings.
  • Sorting: Popularity or recent sorting aligns with shortcode filters.
  • Inventory: Hide out-of-stock products to keep the homepage clean.
  • AJAX Cart: Seamless add-to-cart actions encourage purchases.

For example, a shortcode like [products limit=\”4\” columns=\”4\” on_sale=\”true\”] paired with AJAX cart and clear catalog images creates a compelling, user-friendly sale section.

Tips for Success

  • Match Image Sizes: Align Product Images settings with your theme to avoid blurry visuals.
  • Enable Reviews Sparingly: Use verified owner settings to maintain credibility.
  • Track Stock: Set low stock notifications to keep homepage products available.
  • Keep Shortcodes Simple: Start with [products limit=\”4\” columns=\”4\”], then add category or on_sale.
  • UTM Consistency: Use lowercase and hyphens (e.g., featured-products) for clean data.
  • Test Displays: Verify shortcodes show correct products and UTM links track in GA4.
  • Mobile-Friendly: Ensure grids and images work on smaller screens.
  • Check Documentation: See WooCommerce’s shortcode guide or product settings docs.

Troubleshooting

  • Products Not Showing:
    • Check category slugs or ensure products are published.
    • Verify sales for [best_selling_products] or discounts for on_sale.
  • Blurry Images:
    • Adjust Product Images sizes and regenerate thumbnails (use a plugin like Regenerate Thumbnails).
  • UTM Not Tracking:
    • Test links in GA4’s Realtime report.
    • Ensure no redirects strip UTM tags.
  • Cart Issues:
    • Confirm AJAX or redirect settings in Add to Cart Behavior.
  • Stock Errors:
    • Revisit Inventory thresholds and notifications.

Conclusion

By configuring Product Settings, you create a robust framework for your WooCommerce store, ensuring products are well-organized, visually appealing, and easy to manage. Pairing this with shortcodes lets you display tailored product grids on your homepage, from bestsellers to sales. Adding UTM parameters ties it all together, giving you data to track performance and optimize your store. This approach is simple, plugin-free, and powerful.

For more guidance, explore WooCommerce’s documentation or search X for community tips. Ready to shine? Set up your settings, add a product shortcode, and track it with UTM today!

Call to Action: Configure your Product Settings and add a homepage product grid now! Share your store or UTM insights in the comments, and subscribe for more WooCommerce and analytics tips.

Leave a Comment

Your email address will not be published. Required fields are marked *

Get your website at just ₹499/Year

enroll today

Subscribe

Website Demo

About

Follow Me

Facebook-f Twitter Pinterest Youtube