Prelimenary draft of the code but it seems to be working alright so far. Will extend this article with screenshots later on when I’m fully done testing and optimizing the code. In the meantime enjoy.

/*
FIXING NOT RESPONSIVE WIDTH OF SINGLE IMAGES IN VISUAL COMPOSER
by golabs.nl

Row Settings
Row stretch : Stretch row and content (no paddings)
Content position : Middle
Column Setting
<no changes needed>
Single Image Settings
Image size : full
Image alignment : Center
*/
.page .wpb_single_image .vc_figure {
display: inherit;
}

/* Base (1180 Grid) */
@media only screen and (min-width: 1290px) and (max-width: 1390px) { }

/* Desktop (960 Grid) */
@media only screen and (min-width: 960px) and (max-width: 1389px) {
.vc_single_image-wrapper img { max-width: 1020px !important; }
}

@media only screen and (min-width: 769px) and (max-width: 1040px) {
.vc_single_image-wrapper img { max-width: 100% !important; }
.vc_col-sm-12.wpb_column.column_container { padding: 0 !important; }
}

/* Tablet (Portrait) */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 990px) {
.vc_single_image-wrapper img { max-width: 100% !important; }
.vc_col-sm-12.wpb_column.column_container { padding: 0 !important; margin-bottom: 0 !important; }
}

/* Mobile (Portrait) */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.vc_single_image-wrapper img { max-width: 100% !important; }
.vc_col-sm-12.wpb_column.column_container { padding: 0 !important; margin-bottom: 0 !important; }
}

/* Mobile (Landscape) */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.vc_single_image-wrapper img { max-width: 100% !important; }
.vc_col-sm-12.wpb_column.column_container { padding: 0 !important; margin-bottom: 0 !important; }
}

It has taken a while but I finally managed to get it working… the SKU from a WooCommerce product in the permalink. Yes!

Now we can finally make WooCommerce product permalinks like: http://domain.tld/product-base/sku/product-name

After some Googling I ended up at this excellent starting point: How to add sku to product url in woocommerce? 

It was quickly modified to have the SKU not added to the end of the permalink like a name reference (#SKU) but to be an integrated part of the permalink.

// place this code in your (child) themes function.php
function jpb_custom_meta_permalink( $link, $post ){
$post_meta = get_post_meta( $post->ID, '_sku', true );

if( empty( $post_meta ) || !is_string( $post_meta ) ) {
$post_meta = 'sku_missing';
}

$link = str_replace( '%%sku%%', $post_meta, $link );
return $link;
}
add_filter( 'post_link', 'jpb_custom_meta_permalink', 10, 2 );

function append_sku_string( $link, $post ) {
$post_meta = get_post_meta( $post->ID, '_sku', true );

if ( 'product' == get_post_type( $post ) ) {
//$link = $link . '#' .$post_meta;
$link = str_replace( '%%sku%%', $post_meta, $link ); // go to the WordPress Permalink settings page to set the Custom Product Permalink Base to: /product-base/%%sku%%
return $link;
}
}
add_filter( 'post_type_link', 'append_sku_string', 1, 2 );

After setting the custom permalink structure for products with /product-base/%%sku%%, the permalinks worked BUT I couldn’t load the product pages… oops! So time for troubleshooting. As I fairly quickly thought into the direction of RewriteRules in the .htaccess file I’ve been looking into that but they are absolutely not my favorite thing to deal with so progress was slow. That said – the solution is the following:

# BEGIN WC SKU post meta in permalink (note: requires code in functions.php as well)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^product-base/([A-Za-z0-9-_]+)/([A-Za-z0-9-_]+)/?$ ?sku=$1&product=$2 [NC,L]
</IfModule>
# END WC SKU post meta in permalink

Just make sure that you place this above the # BEGIN WordPress line in your .htaccess and you’re ready to rock’n’roll. Yeah baby!

Some notes:

• The WC SKU is a post meta named _sku.
• There is no support in the WordPress core for post meta values in permalinks.
• You can name the product-base anything you want as long as you change it in all the code and also on use it on the WordPress > Settings > Permalinks page.
• In the RewriteRule the sku=$1 can also be removed as WordPress will not look at it to locate and load your product page, without the product=$2 you will just get an 404 error!
• it would probably have been better to use ?_sku but it doesn’t matter, as explained in the previous bullet, it’s just there for the show.
• The RewriteRule could also have been placed within the #BEGIN WordPress … #END WordPress section of your .htaccess as long as it’s placed between RewriteRule ^index\.php$ – [L] and RewriteCond %{REQUEST_FILENAME} !-f. To make it more fool proof -for myself- I just go for a separate section above the WordPress generated code.
• It would be really great if the SKU would become part of the permalink options directly via the WooCommerce plugin so we don’t have to play around with these extra lines of code in our functions.php and .htaccess. So please request this feature with the WooCommerce team as well. It’s also the reason why I have chosen to use %%sku%% instead of %sku%, just to point out to myself it’s not a core functionality ;)