Using a GP page as the Woo shop page

Correct. I have already tested that. But is it not what I am after. I want to create a shop page with custom content the same as the example I originally posted.

I'm not sure if it's possible to tell WooCommerce to use a static page instead of their index as the shop page. It may be worth asking them - I assume it's been asked a lot, so they might have a solution for it.

One workaround is setting up a 301 redirect from their shop index to your static page, but that's less than ideal.

Why can't I just echo my html and shortcodes in the spot in my custom shop page template where the product loop used to live. For example:

This almost works:

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header( 'shop' );

?>

<?php
 echo '<div class="grid-25">
<a href="https://mywebsite.com/products/category/stuff/">
  <div>
  <ul class="chev-gp">
 	<li>BEST SELLING</li> 	
</ul>
<h2 class="grid-cat-name">Stuff</h2>
  </div>
</a>
<p class="grid-cat-text">Change your life with this really cool stuff.</p>
<div class="center-content">
<div class="cat-button-wrap"><a class="inspired-button" href="https://mywebsite.com/products/category/stuff/">Get Stuff Now</a></div>
</div>
</div>

<div class="grid-75">
[products limit="3" columns="3" category="stuff" visibility="featured"]

</div>';

/**
 * Hook: woocommerce_after_main_content.
 *
 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
 */
do_action( 'woocommerce_after_main_content' );

get_footer( 'shop' );

The shortcode falls over because I can't get the echo do_shortcode bit right.

FYI I have also tried the following:
1. I copied the page.php template from GP and put it in the woo folder in my child theme.
2. I then renamed it archive-product-custom-shop-page.php so that it gets called by my if shop function.

Worked. But still faced with the same problem. How to edit it to include sections.

I just want to do the same as what the website linked to above has done. Surely it can't be that difficult.

Using a custom template like that should work.

What about do_shortcode() are you having trouble with?

It should look like:

<?php echo do_shortcode( '[products limit="3" columns="3" category="stuff" visibility="featured"]' ); ?>

Yes I know that is how to echo a shortcode.

But what I can't get right is how to the echo the shortcode when it is nested within the grid-75 div.

I would appreciate some help with that.

I have tried the following but it returns the following syntax error:

unexpected T_STRING, expecting ']'

<?php
 echo '<div class="grid-25">
<a href="https://mywebsite.com/products/category/stuff/">
  <div>
  <ul class="chev-gp">
 	<li>BEST SELLING</li> 	
</ul>
<h2 class="grid-cat-name">Stuff</h2>
  </div>
</a>
<p class="grid-cat-text">Change your life with this really cool stuff.</p>
<div class="center-content">
<div class="cat-button-wrap"><a class="inspired-button" href="https://mywebsite.com/products/category/stuff/">Get Stuff Now</a></div>
</div>
</div>

<div class="grid-75">
echo do_shortcode( '[products limit="3" columns="3" category="stuff" visibility="featured"]' );
</div>';

Also how would I add a full width color background to the above 25/75 grid in my custom template. The same as would appear if I was using a section added the above html and then and then set the section background to fullwidth and lets say color #252525 ?

Instead of structuring your block like that, I would do this:

// Close off the last open PHP tag 
?>

<div class="grid-25">
<a href="https://mywebsite.com/products/category/stuff/">
  <div>
  <ul class="chev-gp">
 	<li>BEST SELLING</li> 	
</ul>
<h2 class="grid-cat-name">Stuff</h2>
  </div>
</a>
<p class="grid-cat-text">Change your life with this really cool stuff.</p>
<div class="center-content">
<div class="cat-button-wrap"><a class="inspired-button" href="https://mywebsite.com/products/category/stuff/">Get Stuff Now</a></div>
</div>
</div>

<div class="grid-75">
    <?php echo do_shortcode( '[products limit="3" columns="3" category="stuff" visibility="featured"]' ); ?>
</div>
<?php
// Re-open the PHP tag

I would need to see the page in order to answer your second question, as it depends on the HTML structure of the page.

I am working behind a protected directory. How can I post the password in private.

Thanks for your help with the code.

I did not know I could close the previous php tag and then just insert the bare html. I thought that the html had to be echoed.

No problem! You can send the details through our contact form: https://generatepress.com/contact/

Be sure to mention this topic.