Developer Log: WooCommerce Bulk Variations with Global Price Adjustments

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.

Added by Ciprian on Monday, March 16, 2020 in Blog

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started

Related Articles


Privacy Policy