Improve quality of woocommerce thumbnails on product page - css

I am trying to improve the quality of Wooommerce thumbnails on product page, but with no results. The thumbs are always displayed blurry not matter what I do.
I have tried different plugins like for retina etc, regenerated thumbs, uploaded via ftp new photoshopped 300 dpi imgs and replaced them with the ones which were in the gallery, uploaded bigger imgs, disabled jetpack, played with the different img settings in woocommerce and wordpress (set quality to 100%/scaling etc), put this string into functions.php file add_filter('jpeg_quality', function($arg){return 100;}); and so on, still nothing.
So I think there is some settings that are maybe related to FlexSlider, the slider woocommerce uses. It might be related to Woolentor as well? Using Astra theme + Elementor. I'm clueless.
Here's a link to a product page on my website (eg. check be quiet! logo, blurry in the thumbnails gallery, orginal image is 900x900px): https://gamingaddicted.it/prodotto/handpicked-red-chillies/
Thanks in advance!

You could do it with this code bellow or directly with the customizer on your website. Here is the url with some tips, maybe you should take a look at them. - TIPS HERE
Add this code to your theme's functions.php file and change the width and height as you wish.
/*change thumbnail quality in woocommerce*/
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 600, //change this to edit thumbnail witdth - default 150px
'height' => 600, //change this to edit thumbnail height - default 150px
'crop' => 0,
);
} );

The accepted answer didn't work for me, however the below did, if anyone runs into the same issue like me.
/*Change WC Gallery thumbnail size*/
add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
return array(
'width' => 200, // Set WC gallery thumbnail width
'height' => 200, // Set WC gallery thumbnail width
'crop' => 0,
);
} );

Related

Double logo in wordpress site identity?

I need double logo in site identity of WordPress customizer. One on mobile view and other on desktop view. Both are different images. Please provide code for adding two logos.
I have code for adding one custom logo. and I need it on site identity itself
function lotus_flies_custom_logo_setup()
{
$defaults = array(
'height' => 139,
'width' => 176,
// 'flex-height' => true,
// 'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support('custom-logo', $defaults);
}
add_action('after_setup_theme', 'lotus_flies_custom_logo_setup');
The best way to have different logo according to screen size is to use #media queries in CSS.
So you could just find out a css selector for your current icon, and add some css to resize it according to screen size, in your inherited custom template.
Instead of resizing, you could also just completely change the source of the image in CSS.
( As an inspiration: Swap out 3 differently-sized logos with media queries? . Documentation: Using_media_queries )

Wordpress post. List images as a masonry grid

I have googled around without finding a good solution for this. What i want to do is to create a masonry-like grid in a post where all images in the post should be in the masonry grid. How could i achieve this?
Note: With this idea you can get all attached image to the post either in gallery or inside the content
First let's add Masonry to your theme,
wp_enqueue_script( 'masonry' );
wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js' );
then add this javascript code to your theme somewhere in footer or in your custom.js file
jQuery(window).load(function() {
var container = jQuery('#mas-maincontainer');
var msnry = new Masonry(container, {
itemSelector: '.mas-item',
columnWidth: '.mas-item',
});
});
Now let's get all images attached to the post as you want
$attachments = get_children(array('post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image'));
foreach($attachments as $att_id => $attachment) {
$full_img_url = wp_get_attachment_url($attachment->ID);
//Here is your HTML to grid your images...
// Remember your images should be between <div id="mas-maincontainer"></div>
}
now you should add your custom CSS as below
.mas-item {
width: 50%; // if you want two column
}
.mas-item {
width: 33%; // if you want three column
}
This is the whole idea and hope it works for you
You can use wordpress's native gallery. This solution will give you good control on where you want to put the images in the content and it is easy to manage the gallery and it's images.
Disable the default style with this filter:
add_filter( 'use_default_gallery_style', '__return_false' );
And then use the desandro's masonry plugin to create the gird. This plugin is well documented and is the most common for creating masonry grids, so you should be fine with this plugin.
Remember to style the gallery so it will work with the masonry plugin. Here are the 2 selectors you will be using, .gallery (is the container for every gallery), and .gallery-item (is the conatiner for each image in the gallery).

Remove Wordpress WooCommerce StoreFront Header Styles

The Wordpress WooCommerce StoreFront Theme queues styles in the header from the WooCommerce StoreFront Customiser;
<style id='storefront-woocommerce-style-inline-css' type='text/css'></style>
<style id='storefront-style-inline-css' type='text/css'></style>
I seem to spend more time over-righting these styles, than defining what I want. Does anyone know how to remove them or disable the Storefront customiser?
For anyone that is fighting with this, this is the solution I found:
function my_theme_remove_storefront_standard_functionality() {
//remove customizer inline styles from parent theme as I don't need it.
set_theme_mod('storefront_styles', '');
set_theme_mod('storefront_woocommerce_styles', '');
}
add_action( 'init', 'my_theme_remove_storefront_standard_functionality' );
The two of inline CSS was added in class-storefront-customizer.php.
For deregister storefront-style-inline-css:
add_filter('storefront_customizer_css', '__return_false');
For deregister storefront-woocommerce-style-inline-css:
add_filter('storefront_customizer_woocommerce_css', '__return_false');
I had to remove these recently, and the best way to do it is using Ngoc Nguyen's method.
Just put the below code in your functions.php
function wpcustom_deregister_scripts_and_styles(){
wp_deregister_style('storefront-woocommerce-style');
wp_deregister_style('storefront-style');
}
add_action( 'wp_print_styles', 'wpcustom_deregister_scripts_and_styles', 100 );
Is this working in Storefront 2.0.4?
Because i have these filters:
add_filter( 'storefront_customizer_enabled', '__return_false' );
add_filter( 'storefront_customizer_css', '__return_false' );
add_filter( 'storefront_customizer_woocommerce_css', '__return_false' );
but i have still inline css.
The first filter was mentioned in topic:
https://wordpress.org/support/topic/remove-inline-css-1?replies=8
Try this:
add_filter( 'storefront_customizer_enabled', 'woa_storefront_disable_customizer' );
function woa_storefront_disable_customizer() {
return false;
}
https://github.com/FrancySanchez/storefront-child/blob/master/functions.php
I had been having this problem and though my solution is quite specific to my own application, you may find use in it.
My problem was that I wanted white menu text with a hover color of a light grey. By default the inline css that you have a problem with seemed to take your menu text color, lighten it by a factor and set that color as the hover color. Obviously white cannot be lightened so my menu simply stayed the same on hover. Here is how I solved this:
In the file "class-storefront-customizer.php" located at wp-content/themes/storefront_child/inc/customizer there are functions defined on how the theme editor interface works. Firstly I took the following function:
public static function get_storefront_default_setting_values() {
return apply_filters( 'storefront_setting_default_values', $args = array(
'storefront_heading_color' => '#333333',
'storefront_text_color' => '#6d6d6d',
'storefront_accent_color' => '#aeaeae',
'storefront_header_background_color' => '#ffffff',
'storefront_header_text_color' => '#6d6d6d',
'storefront_header_link_color' => '#333333',
'storefront_footer_background_color' => '#f0f0f0',
'storefront_footer_heading_color' => '#333333',
'storefront_footer_text_color' => '#6d6d6d',
'storefront_footer_link_color' => '#333333',
'storefront_button_background_color' => '#eeeeee',
'storefront_button_text_color' => '#333333',
'storefront_button_alt_background_color' => '#333333',
'storefront_button_alt_text_color' => '#ffffff',
'storefront_layout' => 'right',
'background_color' => 'ffffff',
) );
}
And I set the storefront_accent_color var as the offset color I wanted, in my case #aeaeae. This set the default color to that value for the editor. This step is not necessary but does make it easier.
I also set this option to the same value as I was not sure which would really take effect...
$wp_customize->add_setting( 'storefront_accent_color', array(
'default' => apply_filters( 'storefront_default_accent_color', '#aeaeae' ),
'sanitize_callback' => 'sanitize_hex_color',
) );
On line 501 of this file is the definition of the function get_css() which sets up the inline css you see that you are trying to get rid of. For me, the value I needed to change was in this section:
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:hover,
a.cart-contents:hover,
.site-header-cart .widget_shopping_cart a:hover,
.site-header-cart:hover > li > a,
.site-header ul.menu li.current-menu-item > a {
color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_link_color'], 80 ) . ';
}
I changed the value of this css attribute to:
color: ' . $storefront_theme_mods['accent_color'] . ';
This did not change the set color of my offset on hover. What it did do however was change the editor.
So the final step is to go into the editor, go to the typography tab, select accent color, hit the default color button (which should now come up as my color) and then SAVE that. My menu worked fine after that.
This was a bit long and not quite what you were asking for, but I put it all in to illustrate how you can manipulate the values that are output into that inline css. Hopefully that info has helped you.
In case anyone else stumbles on this question here's how I managed to solve it:
Create a child theme from the parent storefront theme. (refer to this link to find out how to do that: https://developer.wordpress.org/themes/advanced-topics/child-themes/)
In the child theme's functions.php file put the following code:
remove_action( 'wp_enqueue_scripts', array( $storefront->customizer, 'add_customizer_css' ), 130 );
It basically grabs the function "add_customizer.css" from the class Storefront_Customizer, which adds the inline css, and removes that hooked function from the 'wp_enqueue_scripts'.
In the storefront theme's functions.php file there's the following code:
$storefront = (object) array(
'version' => $storefront_version,
/**
* Initialize all the things.
*/
'main' => require 'inc/class-storefront.php',
'customizer' => require 'inc/customizer/class-storefront-customizer.php',
);
What it does is it stores the class Storefront_Customizer from file 'class-storefront-customizer.php' in $storefront array and then converts the array into an object.
By creating a child theme you'll be able to update your parent storefront theme and the changes won't be lost.
after several trials I got a final solution to solve the problem!
It's to simple to believe :-)
Remove the following line in "class-storefront-customizer.php" and it works:
add_action( 'wp_enqueue_scripts',array( $this, 'add_customizer_css' ), 130 );
Regards
Herbert

Wordpress: Featured images all showing with 1px width and 1px height

I'm not sure what exactly has caused this, but either after upgrading to the latest WP version or using WP.SmushIt plugin, all my featured/thumbnail images are displaying with 1px width, and 1px height.
The regular images used inside the pages/content are fine, only those that I'm calling using get_the_post_thumbnail($post_id, 'carousel-thumb'); are broken.
carousel-thumb is just a custom size I've defined in my functions.php like add_image_size( 'carousel-thumb', 220, 220, true ); //(cropped)
Any help is appreciated.
Was able to fix the issue using Regenerate Thumbnails plugin.
maybe you need to add this code to your functions.php,
add_action( 'admin_head', 'style_thumbsss' );
function style_thumbsss()
{
echo '
<style type="text/css">
.inside p.hide-if-no-js a img.attachment-post-thumbnail { width: 230px!important; height: 160px!important; }
</style>';
}
or may need to use plugin, called "REGENERATE thumbnails" , which creates new thumbs for the uploads images, and sets them normally.

Button image is not working properly

I recently added a image to the edit button in YII.I do the following,
'class'=>'CButtonColumn',
'header' => 'Edit',
'template' => '{Edit}',
'buttons' => array(
'Edit' =>array(
'label' => 'Edit',
'imageUrl'=>Yii::app()->request->baseUrl.'/images/Actions-document-edit.ico',
));
and css for the button goes like this,
td.button-column a img {
max-height:25px;
max-width:25px;
}
And the actual size of the image Actions-document-edit.ico is 25*25.
I have a situation here that, i have an 25*25 image in Google Chrome and 2*2 image in mozilla firefox. Help me to achieve the proper formatting of the image in both the browsers.
And suggest also the pagenation problem.
Instead of .ico try to use .JPEG or .png or .gif image
Pagenation problem was solved
.pager ul.yiiPager li.page:after{display: inline-block !important}
But still am getting image problem... Help please...

Resources