Responsive Product Data Tabs in WooCommerce

If you have added custom product data tabs to your woocommerce install, then you might have noticed that they don’t work well on a small screen. In this post I will modify the default tab template with a responsive design to make the tabs stack nicely on a mobile device.

On a desktop screen, I want the tabs to continue to work the same as normal, and on a mobile screen I want the tabs to display as an accordion. The default markup makes this hard to do, as the tabs and the content are in separate <div> tags.

There are two options to get around this. Modify the template and duplicate the content, then use css to show and hide the tab content. The other would be to use javascript to move the content into the correct place when a tab is clicked, avoiding the duplicate content.

I will choose the CSS route, as it’s a bit simpler and doesn’t interfere with the js that Woocommerce already adds to the page.

The template that lays out tabs is woocommerce/templates/single-product/tabs/tabs.php, so copy that from the woocommerce plugin and copy it to your theme inside the woocommerce folder.

<?php
/* CSS for responsive product tabs in WooCommerce. See my blog post here: https://www.timrosswebdevelopment.com/responsive-product-data-tabs-woocommerce */
/**
* Filter tabs and allow third parties to add their own.
*
* Each tab is an array containing title, callback and priority.
*
* @see woocommerce_default_product_tabs()
*/
$product_tabs = apply_filters('woocommerce_product_tabs', array());
if (! empty($product_tabs)) : ?>
<!– Add a new class to style the responsive tabs –>
<div class="woocommerce-tabs wc-tabs-wrapper woocommerce-tabs-responsive">
<ul class="tabs wc-tabs" role="tablist">
<?php foreach ($product_tabs as $key => $product_tab) : ?>
<li class="<?php echo esc_attr($key); ?>_tab" id="tab-title-<?php echo esc_attr($key); ?>" role="tab" aria-controls="tab-<?php echo esc_attr($key); ?>">
<a href="#tab-<?php echo esc_attr($key); ?>">
<?php echo wp_kses_post(apply_filters('woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key)); ?>
</a>
<!– Add the content here that is only displayed on small screens –>
<div class="woocommerce-Tabs-accordion-content woocommerce-Tabs-accordion-content–<?php echo esc_attr($key); ?> entry-content" id="accordion-<?php echo esc_attr($key); ?>">
<?php
if (isset($product_tab['callback'])) {
call_user_func($product_tab['callback'], $key, $product_tab);
}
?>
</div>
</li>
<?php endforeach; ?>
</ul>
<?php foreach ($product_tabs as $key => $product_tab) : ?>
<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel–<?php echo esc_attr($key); ?> panel entry-content wc-tab" id="tab-<?php echo esc_attr($key); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr($key); ?>">
<?php
if (isset($product_tab['callback'])) {
call_user_func($product_tab['callback'], $key, $product_tab);
}
?>
</div>
<?php endforeach; ?>
<?php do_action('woocommerce_product_after_tabs'); ?>
</div>
<?php endif; ?>
view raw tabs.php hosted with ❤ by GitHub

In this template, I’ve duplicated the tab content inside each tab. I will use CS to hide and show this content on active tabs. I’ve also added a class name to the tab block so that we can use CSS to style the responsive tabs.

With that done, I can use CSS to make sure the tabs display correctly on small screens.

/* CSS for responsive product tabs in WooCommerce. See my blog post here: https://www.timrosswebdevelopment.com/responsive-product-data-tabs-woocommerce */
/* For small screens only */
@media screen and (max-width: 767px) {
.woocommerce-tabs.woocommerce-tabs-responsive ul li {
/* this rule needs to be important to override the default woocommerce style */
display: flex !important;
flex-direction: column;
width: 100%;
}
.woocommerce-tabs.woocommerce-tabs-responsive .woocommerce-Tabs-panel {
/* this rule needs to be important to override the default woocommerce style */
display: none !important;
}
.woocommerce-Tabs-accordion-content {
display: none;
}
.woocommerce-tabs.woocommerce-tabs-responsive ul li.active .woocommerce-Tabs-accordion-content {
display: block;
}
}
/* On larger screens make sure the accordion does not show. */
@media screen and (min-width: 768px) {
.woocommerce-Tabs-accordion-content {
display: none !important;
}
.woocommerce-tabs.woocommerce-tabs-responsive ul li {
display: inline-flex;
width: auto;
}
}

Webpack with hot module replacement (HMR) in WordPress theme development

I tried for what seemed a very long time to get HMR set up and working with in my wordpress theme but really struggled to workout how to set it up correctly.

Below I’ve detailed what I have done to get HMR working on my development virtual machine. And also getting a Vue.js app working with HMR and vue-cli 3.

Continue reading “Webpack with hot module replacement (HMR) in WordPress theme development”

WordPress REST API order by meta_value

Another quick tip here, for future reference.

I needed to sort the custom posts in a REST API response by a meta value, something like this:

https://www.timrosswebdevelopment.com/wp-json/wp/v2/accommodation?orderby=number_of_beds

Where number_of_beds is a field that has been added using Advance Custom Fields.

The problem is the REST API only allows certain core fields to be used for the orderby param. See my other post on adding REST API orderby custom values for more info. So the question was how to add another.

Continue reading “WordPress REST API order by meta_value”

How to filter WordPress REST API for custom post type by taxonomy slug

I spent ages looking for an answer to my question of how to implement this, I knew that it was possible but I couldn’t seem to find the right answer anywhere. So I’m posting it here for my future reference and in case anyone else finds it.

The issue is compounded by there being so many links to old questions and tutorials for previous versions of the WordPress REST API. As of writing my version of wordpress is 4.9.8. And that makes it REST API v2.

I finally found the answer to my question here on stackexchange.

Continue reading “How to filter WordPress REST API for custom post type by taxonomy slug”

Typo3 6.2 web services with eID and Extbase extensions

I have been having to make a lot of web service end points in Typo3 recently and it drives me mad that there isn’t an out of the box solution in Typo3. It just seems crazy.

So, I though I’d write down the way I’m doing it, to help out anyone else who is struggling.

Continue reading “Typo3 6.2 web services with eID and Extbase extensions”

Debugging Database Queries in Extbase in Typo3 6.2 CMS

If you are using extbase to develop typo3 extentions you can use the Query object to build queries without having to write SQL. The only problem is that if you want to see the actual SQL that is being executed it is hidden from view.

Continue reading “Debugging Database Queries in Extbase in Typo3 6.2 CMS”