Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Force MarketPress Variation Modal 100% Width
<?php
/* The following code forces the WPMU DEV MarketPress plugin variation
* modal (popup) to use 100% of the active window width. This works for
* both desktop and mobile. The code also applies custom CSS that makes
* the product image take 100% width of the parent container. The code
* applies to both the Store homepage and Products page. This should be
* added to the active theme's functions.php AFTER MarketPress has been
* installed and activated.
*/
add_action( 'wp_footer', function(){
if ( ! is_page( array(
mp_get_setting( 'pages->products' ),
mp_get_setting( 'pages->store' )
) ) ){
return;
}
?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$( '.mp_button-has_variations' ).each(function(){
let cur_button = $(this);
let new_button = $( '<a/>', {
'class': 'mp_button mp_link-buynow cboxElement',
href: cur_button.attr('href'),
text: cur_button.text()
});
var mywidth = $(window).width();
new_button.attr( 'data-href', cur_button.data( 'href' ) ).colorbox( {
"close": "x",
"href": function() {
return new_button.attr( 'data-href' );
},
"overlayClose": false,
"trapFocus": false,
//"width": 630,
"width": mywidth,
"overlayClose": true,
"escKey": true,
onLoad: function() {
$( "#colorbox" ).removeAttr( "tabindex" ); //remove tabindex before select2 init
},
onComplete: function() {
$( "select.mp_select2" ).mp_select2( {
"dropdownCssClass": "mp_select2",
"dropdownAutoWidth": 1,
"minimumResultsForSearch": -1
} );
}
} );
cur_button.replaceWith( new_button );
});
});
})(jQuery);
</script>
<?php
}, 10 );
add_action('wp_head', 'tweak_cboxContent_css', 100);
function tweak_cboxContent_css(){
?>
<style type="text/css" media="screen">
#cboxContent{
margin: 0 -2px -4px !important;
overflow:hidden !important;
}
#cboxLoadedContent img {
max-width:100% !important;
height:auto !important;
}
</style>
<?php
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment