Simple Function to scale image using jQuery in Woocommerce Shop

As the title suggests, Ar you looking to have a little bit of jQuery – if an image is not proportional it adds a class a certain element. This, for a Woocommerce shop loop Thumbnail image.

Woocommerce Function for shop page loop to add a wrapper div around product thumbnail

---

 

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
}
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
global $post, $woocommerce;
$output = 'div class="imagewrapper" div class="imgwrap"';

if ( has_post_thumbnail() ) {
$output .= get_the_post_thumbnail( $post->ID, $size );
}
$output .= ' /div> /div';
return $output;
}
}

---

Style for the wrapper and image to adjust itself to the wrapper div

.imagewrapper {
    width: 100%;
    height: 320px;
    display: flex;
    border: 1px solid #e6e6e6;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden !important;
    position: relative;
}
.imagewrapper img {
    height: auto;
    width: 100%;
    border:0px !important;
}
.imagewrapper img.portrait {
    position: absolute;
    max-height: 100% !important;
    top: 0px;
    width: initial !important;
    transform: translateX(-50%);
}

---

jQuery(window).load(function () {
     var image = jQuery('.imagewrapper img');
     image.each(function () {
           var that = jQuery(this);
           if (that.width() < that.height()) {
           that.addClass('portrait');
          }
     })                    
});

---

Sorry, this file type is not permitted for security reasons

---

WordPress supports uploading the following file types:

Images

.jpg
.jpeg
.png
.gif
.ico

Documents

.pdf (Portable Document Format; Adobe Acrobat)
.doc, .docx (Microsoft Word Document)
.ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation)
.odt (OpenDocument Text Document)
.xls, .xlsx (Microsoft Excel Document)
.psd (Adobe Photoshop Document)

Audio

.mp3
.m4a
.ogg
.wav

Video

.mp4, .m4v (MPEG-4)
.mov (QuickTime)
.wmv (Windows Media Video)
.avi
.mpg
.ogv (Ogg)
.3gp (3GPP)
.3g2 (3GPP2)

Not all webhosts permit these files to be uploaded. Also, they may not permit large file uploads. If you are having issues, please check with your host first.

Having the issue trying to upload a .mp4 video allowed by word press and getting the same error any clue how to solve it

Simply add this code “define(‘ALLOW_UNFILTERED_UPLOADS’, true);” to wp-config.php file just above the following statement /* That’s all

 

Tracking Script Installation in WooCommerce

Google will give a Tracking code like the code below

/* get_total(); ?>;
var google_conversion_currency = "USD";
var google_remarketing_only = false;
/* ]]> */

//www.googleadservices.com/pagead/conversion.js
<noscript>



</noscript>

Here in this code locate the code

var google_conversion_value = 1.00;

Duplicate the  PHP file named thankyou.php located in woocommerce/checkout/thankyou.php plugin directory to the theme folder
/wp-content/themes/theme-directory/woocommerce/checkout/
and copy the tracking code to the file. Replace the google_conversion_value to:-

google_conversion_value = <?php echo $order->get_total(); ?>;

</p> <div style=”display:inline;”> <img height=”1″ width=”1″ style=”border-style:none;” alt=”” src=”//www.googleadservices.com/pagead/conversion/1031505146/?value=1.00&currency_code=USD&label=5sHfCJr2hG0Q-onu6wM&guid=ON&script=0″/> </div> <p>