Support » Plugin: WP Shopify » Layouts for noobs

  • Resolved mapples



    I’m a bit of a noob at php and some of the links in your doc seem to redirect to blank pages. Like those on the Render API page…

    But my question is, is there a way to call specific parts of a product when listing multiple items out. For example. Can be with php, shortcodes, etc.

    `<div class=”my-noob-class”>TITLE</div><div class=”my-noob-desc”>DESCRIPTION</div>

    Then when it shows 10 listing, it displays the title and description of those listings.

    I understand you can use exclude and have it output just the parts you want. But can you grab each component and place it in your own custom div?

    I’m using this on an Oxygen Builder website, and I saw you support E and Beaver already. I posted a similar question in the Oxygen group and it seems not many people have heard of you but are interested.


Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Andrew @



    Hey there, great question! Technically there is a way to do this which requires using the “dropzone” shortcode attributes / render api props.

    There are five dropzone properties that you can use:


    When using one of these, you’ll need to specify a CSS selector that points to the <div> where you want the product information to live. So like this:

    $Products = WP_Shopify\Factories\Render\Products\Products_Factory::build();
       'dropzone_product_buy_button' => '#product_buy_button',
       'dropzone_product_title' => '#product_title',
       'dropzone_product_description' => '#product_description',
       'dropzone_product_pricing' => '#product_pricing',
       'dropzone_product_gallery' => '#product_gallery',
       'limit' => 1
    <div id="product_buy_button"></div>
    <div id="product_title"></div>
    <div id="product_description"></div>
    <div id="product_pricing"></div>
    <div id="product_gallery"></div>

    You can do the same thing with the [wps_products] shortcode.

    By default, this will only work with one product. So if you want to do this with multiple different products you’ll need to write a foreach loop like this:

    $Products = WP_Shopify\Factories\Render\Products\Products_Factory::build();
    $posts_ids = get_posts([
        'post_type' => 'wps_products',
        'posts_per_page' => -1,
        'fields' => 'ids',
    foreach ($posts_ids as $posts_id) { ?>
       <section class="wps-product">
          <div id="product_buy_button-<?= $posts_id; ?>"></div>
          <div id="product_title-<?= $posts_id; ?>"></div>
          <div id="product_description-<?= $posts_id; ?>"></div>
          <div id="product_pricing-<?= $posts_id; ?>"></div>
          <div id="product_gallery-<?= $posts_id; ?>"></div>
          'dropzone_product_buy_button' => '#product_buy_button-' . $posts_id,
          'dropzone_product_title' => '#product_title-' . $posts_id,
          'dropzone_product_description' => '#product_description-' . $posts_id,
          'dropzone_product_pricing' => '#product_pricing-' . $posts_id,
          'dropzone_product_gallery' => '#product_gallery-' . $posts_id,
          'limit' => 1,
          'post_id' => $posts_id

    Hope this helps!

    Thread Starter mapples


    Wow thanks for the detailed response. The single product works like a charm.

    The $posts_ids array seems to be empty in the second code block however.

    Are you available for custom work by any chance? I have another request for your plugin’s functionality on top of this one, and posted it on a job forum. But I figured I’d ask since you’re here.

    Plugin Author Andrew @


    Hmm, if the $posts_ids array is empty that would indicated that your product posts haven’t been synced correctly. Do you see your products listed inside the backend here? WP Shopify – Products

    I would try manually re-syncing the products to see if that helps.

    I wish I had the bandwidth for custom work but I’m pretty swamped at the moment. However if you want to post your feature request I’ll make sure to look it over and potentially add it to the plugin.

    @andrewmrobbins and @mapples, thank you for sharing this here. @mapples did you insert the PHP in a code block directly on the page? How did you put together the page layout?

    Thread Starter mapples



    I couldn’t get it to work like the above due to a different error.

    I went with the Template Overriding feature in the Pro version, then had a custom plugin coded so it works with Oxygen.

    Plugin Author Andrew @


    @mapples Thanks for the follow up!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.