Since I have been using the Elegant PURL plugin site, I decided to sell an advanced version of the plugin. The lite version is still available in for free, but I would like to provide two versions on the site. That means building a little e-commerce, without scaring me, because I know I’m going to use WooCommerce. However, my challenge is that the standard WooCommerce method defaults to initial routing to the / shop subdirectory and displays the classic product page – which is useless for my needs. After all, the product definition page I can see is a pricing grid.

No mesh required

Not every e-commerce solution will be sold on the product grid. If you are in retail, you will like it, but if you sell software. If you sell a single product, there are several variations. Do you want these changes to be handled in a drop down like a t-shirt size? not necessarily. So in this case, I want a pricing grid. This pricing grid looks nice because I use a Web plug-in named CSS3 Web pricing grid for WordPress, which you can find in CodeCanyon $ 15. Of course I can code myself, but $ 15, I definitely can not code in 6 minutes. So I bought it and filled up some areas and did not have time.

The first step: WooCommerce settings

The first thing I do in the WooCommerce setup is to select an option to put the user in the shopping cart and put something in their shopping cart. This is crucial because I want people to get from the pricing grid to the shopping cart, and this setting lets me do that. Although I also close the shipping, taxes, and determine which payment gateway I support (in my case, it is Stripe).

Step 2: Add the product

In this case, I do not have to enter the product as the product variant. But the problem is that for each column in my pricing grid, I will need a button to put that version (with a unique name) into the shopping cart. So I went into the WooCommerce product and added the two versions I wanted to sell.

Step 3: Put the items into the shopping cart

Since the product page has all the “Add to Cart” buttons, it is a perfect place to grab each product’s URL. These URLs go to the bottom of my pricing grid at the bottom of the URL for the “Buy Now” button. And because the settings in WooCommerce lead people to their shopping carts after selecting items, the expected experience will be perfect. I tested it and it worked.

Question one: empty

But everything is not perfect once I remove the product from the shopping cart. Then I left an empty car. And Empty has a button that says “Continue shopping”, but it takes people back to the product page. I tried to get rid of the page. So this means finding out where to make the adjustment, empty by the /templates/cart/empty.php logic. So this is where I go.

This is the code I found to need to change. Find the text ‘woocommerce_get_page_id (‘ shop ‘)’, because this is the code that Woo uses to set up and find your shopping page. I left the shopping page but completely covered the line to route it to my pricing page. Now, when people want to continue shopping, they will be redirected to the pricing page.

Note: There may be other ways to solve this problem, but this WooCommerce instance can only support this product on this site, so I do not need any more complex solutions.

Problem 2: Shopping Cart widgets

The second question came when I put the shopping cart widget in the sidebar. It’s a great little widget, but it’s trying to send people to the product page of every product in the shopping cart and I will not have any! Therefore, it is time to re-adjust the woocommerce code. Again, this is a very simple tweak if you’re doing what I’m doing. This time code in /widgets/widget-cart.php. When you read the code, you will look for this line:

Echo ‘<li> <a href=”‘.get_permalink($cart_item[‘product_id’]).'”>’ ‘;

This is the line that links the URL of each product to the products listed in the shopping cart. That means it is the line I want to hardcode to my pricing page. So, it placed ‘get_permalink’ and I changed / priced the page again. Quite fast and simple.

The final question: non-empty car

I thought I did. I am satisfied with the results. Then I went on the test and found that when I put the items in the shopping cart, the product allows the user to return to their product page (if they click the link). Oh, oh. I like WooCommerce, but it seems hell bent to focus on the product list / product details page example, and I do not want this site. So come Coda2 (my IDE on Mac), I go back to /templates/cart/cart.php and start reviewing the code.

On the page, you need to find this comment “<-product name->” to see where you are in the right place. Once there, you’ll see that WooCommerce is basically the code that builds the contents of the shopping cart. It has processed the delete icon, thumbnail, and now it’s time to put the product name in place (with its URL). So this is where you want to change. It enters the second parameter of the string it builds. Find esc_url, you found. Within this parameter there is a call to get_permalink, in which a call is applied to a filter. All can go. Instead, in esc_url (), I put (you must use single quotes here), ‘http: //’, and it’s all done.