Not all stores are catalogs & carts
This all started with me getting ready to sell my two-book bundle on remote and winning teams on this site. Using WooCommerce without a products page isn't the norm, but I knew it was what I was going to be doing because I didn't want a whole “shop” to sell one item.
This mirrors the research I did last year where, after looking at 1000+ stores, I noticed the use of more storytelling and less product grids in the designs of these stores. It's even more prevalent when you're selling digital goods instead of physical goods.
By the way, we turned that research into a cool product called StoreBuilder.
Having no products page isn't tough
Let me get straight to the point. You don't need to use WooCommerce product pages just because they create them for you automatically. If you don't put the /shop, the category, and any individual pages in your navigation, they'll not be calling out to your customers.
I used Gutenberg to design the page I wanted. You could use a page builder. Either way, you're going to create a page that stands on its own, like I did.
The page can say anything it wants, as I prepare to highlight the value of my bundle. When you create your page, you can use any headline, any text, and any images to make your case. In essence, you're creating a landing page for your product, and the design can be any way you like it.
[tweet “You can create a landing page for your product, design it any way you like, and use an add-to-cart button, without ever using a #WooCommerce product page.”]
Adding an Add To Cart button
When you're using woocommerce without product pages the most important thing you need is a button that adds items to your cart. After all, without that, no one can buy anything. The good news is that creating that button is easy.
First you need to know the product ID. Let me show you where to find it. Go to your admin > Products > All Products and look at your list of products.
When you roll over the product title, you'll see the ID below the title. That ID is critical to the next step.
Once you have that, you can create any text or button you like. And you're going to use that ID to create the link you add to the text or button. Below you'll see the button. Here is the link that I assigned to the button: https://chrislema.co/cart/?add-to-cart=53012
What you're adding, after the domain name, is “/cart/” and then adding, “?add-to-cart=” followed by that Product ID.
Don't take them back to your Shop
If you're using WooCommerce without a products page, you may also not want to take people to your shop page. But if that's the case, what happens when they put something in your cart, and then delete it.
You end up with a new button there that takes people “back” to your shop. What if you don't want it there? No problem, this is a little line of CSS that you add to your existing CSS.
.woocommerce-cart .return-to-shop { display: none !important; };With that in place, the button is gone. And therefore, shy of someone typing in /shop on your site, no one ever needs to hit the catalog-looking shop page.
The best part of WooCommerce is its flexibility
What you've likely seen in this example is one of the best benefits of WooCommerce. And that's its flexibility. You can use it for carts and catalogs if that's what you need. But you might be using WooCommerce without product pages, and that works too.