Layouts for noobs

@mapples

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:

dropzone_product_buy_button
dropzone_product_title
dropzone_product_description
dropzone_product_pricing
dropzone_product_gallery

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:

<?php 

$Products = WP_Shopify\Factories\Render\Products\Products_Factory::build();

$Products->products([
   '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:

<?php 

$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>
   </section>

   <?php 

   $Products->products([
      '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!

• This reply was modified 5 years, 3 months ago by andrewmrobbins.

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.