Developer Log: WooCommerce Bulk Variations with Global Price Adjustments

👋 Ciprian on Monday, March 16, 2020 in Blog
Last modified on Wednesday, May 13, 2020

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

Here’s the scenario:

I have an exhibition platform, built on WooCommerce, and I need the same stock to be available for multiple exhibitions. After searching the web for solutions or ideas, I came up with the best one: product variations.

Exhibitions are variations, and they inherit the original price and stock. On top of it, a percentage price adjustment (positive or negative) is possible.

I quickly whipped up a WordPress plugin to work with the latest WooCommerce (4+).

Everything below is optional, as it satisfies my own needs for my specific project.

Create a landing page with all exhibitions (as variation terms)

Let’s assume I have an attribute called Showspa_shows – and I have 3 terms inside: Show #1, Show #2 and Show #3. I want to display them in a nice grid on a landing page.

I create my landing page, I use the [variations attribute="shows"] shortcode (it will automatically add the pa_ prefix) and it’s done.

Note that the attribute must already exist.

Also note that the grid is not a grid per-se, but a list. Use the CSS below to style it:

.wcbv-grid {
    display: flex;
    flex-wrap: wrap;
}
.wcbv-grid--cell {
    flex-basis: 25%;
    border: 1px solid red; /* for preview purposes only */
    padding: 24px;
    font-size: 20px;
}

It should look like this:

The red border is part of my development process.

Switch product price based on selected variation

Now, and here’s my custom requirement, I need to preselect the variation on each and every product page. So I use a cookie.

As a small enhancement, I could even hide the attributes dropdown so that the user needs to go to the landing page again and pick a show or an exhibition.

I’ve tested the plugin with all default WordPress themes and also Storefront.

Buy me a coffee to support my work!

👋 Added by Ciprian on Monday, March 16, 2020 in Blog. Last modified on Wednesday, May 13, 2020.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy