Skip to content

Instantly share code, notes, and snippets.

@lemanschik
Created September 15, 2025 11:24
Show Gist options
  • Select an option

  • Save lemanschik/ddc305ccb6ec032c1c98cf05a286255e to your computer and use it in GitHub Desktop.

Select an option

Save lemanschik/ddc305ccb6ec032c1c98cf05a286255e to your computer and use it in GitHub Desktop.
woocomerce

Of course. This is a very common and excellent goal for creating custom landing pages or unique store layouts.

The "easy way" depends on which WordPress editor you are using. I'll break it down from the most modern and recommended method to the classic one.

The key misunderstanding to clear up first is that WooCommerce does not have individual shortcodes for every single element like [product_price id="99"] out of the box.

Instead, you either use the main [product_page] shortcode (which has limitations) or, much more effectively, you use blocks or page builder widgets.


Method 1: The Easiest Way - WordPress Block Editor (Gutenberg)

This is the default, built-in WordPress editor and by far the easiest way to do this without any extra plugins. WooCommerce provides a whole suite of "blocks" to build a product page from scratch.

Here’s how you do it:

  1. Go to Pages > Add New to create your general page.

  2. Click the + icon to add a new block.

  3. In the search bar, type "Product" or "WooCommerce". You will see a list of blocks specifically for a single product.

  4. Start by adding the "Single Product" block. This block acts as a master container.

  5. After you add it, it will ask you to select a product from your store.

  6. By default, it will load the main components (image, title, price, add to cart). You can now treat these as individual blocks inside the main "Single Product" block. You can rearrange them, delete them, or add new ones.

Example: Building a custom layout

You could have a layout like this:

  • Add a Columns block (e.g., a 50/50 split).
  • In the left column, add the Product Image block.
  • In the right column, add the Product Title, Product Price, and Add to Cart Button blocks.
  • Below the columns, add the Product Tabs block to show the description and reviews.

This gives you full control to mix product elements with regular page content like text, videos, or testimonials.


Method 2: The Most Powerful Way - Using a Page Builder

If you use a page builder like Elementor Pro, Divi, or Beaver Builder, this is incredibly easy and gives you the most design flexibility. They have deep WooCommerce integration.

The process is similar for all of them. Here’s an example using Elementor Pro:

  1. Edit your page with Elementor.
  2. In the left-hand widget panel, search for "Product".
  3. You will find a list of dedicated WooCommerce widgets, such as:
    • Product Title
    • Product Images
    • Product Price
    • Add to Cart
    • Product Rating
    • Product Content (the long description)
    • Product Data Tabs (description, reviews, etc.)
  4. Simply drag and drop these widgets anywhere you want on the page. Each widget will ask you to specify the product (or will automatically use the product specified in the page settings).
  5. You can then style every single element (colors, fonts, spacing) using the page builder's controls.

Method 3: The "Classic" Shortcode Method

This is the old-school way. It's fast but gives you the least amount of flexibility.

You use the single [product_page] shortcode.

  1. Edit any page using the standard editor.
  2. Add a Shortcode block (or just paste the text into the classic editor).
  3. Insert the shortcode, specifying the product's ID or SKU.

How to find the Product ID: Go to Products in your WordPress dashboard. Hover over the product, and the ID will appear.

Example: If your product ID is 25, you would use: [product_page id="25"]

Or using the product's SKU: [product_page sku="hoodie-with-logo"]

The big limitation: This shortcode renders the entire single product page layout, exactly as it's defined by your theme's template. You cannot separate the title from the image or move the "Add to Cart" button. It's an all-or-nothing embed.

Which Method Should You Choose?

Method Ease of Use Flexibility Best For...
Block Editor (Gutenberg) Very Easy High Anyone using modern WordPress. This is the recommended default method.
Page Builder (Elementor, etc.) Very Easy Highest Users who already have a page builder and want maximum design control over styling.
Classic Shortcode Easy Very Low Quickly embedding a full, standard product layout on a page without needing any customization.

For your goal of rendering specific parts of a product page, you should absolutely use either the Block Editor (Method 1) or a Page Builder (Method 2).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment