Product images are displaying wrong - you can see the next image when not selected. <div> element with data-thumb attribute has width 360 pixels. This is the default view when page is loaded:
but when you click anywhere it will disappear and second image is not visible anymore:
So I tried to change single_image_width value from 300 px to 800 with no result
function theme_woocommerce_setup() {
add_theme_support(
'woocommerce',
array(
'thumbnail_image_width' => 150,
'single_image_width' => 800,
'product_grid' => array(
'default_rows' => 3,
'min_rows' => 1,
'default_columns' => 4,
'min_columns' => 1,
'max_columns' => 6,
),
)
);
//add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'theme_woocommerce_setup' );
My theme doesn't overwrite product-image.php nor product-thumbnails.php templates located in /woocommerce/templates/single-product/ directory and also doesn't use any filters via functions.php file to change behavior of gallery.
Related
For fast loading in mobile view i want to remove woocommerce related products, what is the code to be added in function.php?
and I do not want to use CSS, thankyou.
The function woocommerce_output_related_products is pluggable. So you can just re-write it.
See: WooCommerce Code Reference
Include this in your functions.php
function woocommerce_output_related_products() {
// Check if mobile and bail if so.
if (wp_is_mobile()) return;
$args = array(
'posts_per_page' => 4,
'columns' => 4,
'orderby' => 'rand', // #codingStandardsIgnoreLine.
);
woocommerce_related_products( apply_filters( 'woocommerce_output_related_products_args', $args ) );
}
You can use wordpress inbuilt function - wp_is_mobile()
https://developer.wordpress.org/reference/functions/wp_is_mobile/
your complete code will be-
if (wp_is_mobile()) {
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
}
I'm building custom tinymce bar buttons for my wp theme, using wp_editor and teeny, but I have a problem. When I add hr and charmap, these buttons not appear in the tinymce bar.
This is the wp_editor configuration:
$settings = array(
'textarea_name' => 'xor_options[' . $editor . ']',
'quicktags' => array( 'buttons' => 'strong,em,del,ul,ol,li,close' ),
'media_buttons' => true,
'wpautop' => false,
'textarea_rows' => 5,
'editor_height' => 200,
'teeny' => true,
'tinymce' => true
);
wp_editor( $xor_output, $xor_editor_id, $settings );
Now I'm using the filter for teeny buttons.
add_filter( 'teeny_mce_buttons', 'xor_editor_buttons', 10, 2 );
function xor_editor_buttons( $buttons, $editor_id ) {
if( $editor_id != 'footer-editor' ) return $buttons;
$buttons = array(
'undo',
'redo',
'formatselect',
'bold',
'italic',
'underline',
'strikethrough',
'blockquote',
'bullist',
'numlist',
'outdent',
'indent',
'alignleft',
'alignright',
'aligncenter',
'alignjustify',
'link',
'unlink',
'hr', // not appears!
'charmap', // not appears!
'removeformat',
'fullscreen'
);
return $buttons;
}
Where is the error in my code or this is a little bug? I'm using Wordpress 4.9. Thanks!
SOLVED
I set on false teeny. Then I set tinymce as array:
'tinymce' => array(
'toolbar1' => $b,
'toolbar2' => '',
'toolbar3' => '',
)
Where $b is all buttons that I need (included hr and charmap). See:
Wordpress Developers
Before you can load the toolbar buttons you need to load the plugins:
https://www.tinymce.com/docs/plugins/hr/
https://www.tinymce.com/docs/plugins/charmap/
You first need to see if the TinyMCE embedded in your WP version includes these plugins (they are in a standard WordPress setup). You then need to add these plugins to the list of loaded plugins. Once they are loaded adding the buttons to the toolbar will work.
I don't know anything about teenymce but (as an example) this is how TinyMCE Advanced loads extra plugins via a WordPress hook:
add_filter( 'tiny_mce_plugins', array( $this, 'tiny_mce_plugins' ), 999 );
(The array is a list of plugin folder names)
I wanted to make custom WordPress theme from scratch so i deleted all my themes, and now the Menu is missing from appearance bar,
i tried adding add_theme_support( 'menus' ); code in functions.php file then my page itself is not opening.
Attached is the screenshot for your reference.
pls help
You need to registered menu using register_nav_menus() in after_setup_theme action hook.
Please check below code. it help you to create two type of menu display location
function custom_theme_setup() {
register_nav_menus( array(
'primary' => esc_html__( 'Primary Menu', 'nepalbuzz' ),
'footer' => esc_html__( 'Footer Menu', 'nepalbuzz' ),
) );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );
This code goes to your custom theme function.php file
For display menu used wp_nav_menu() function.
if ( has_nav_menu( 'primary' ) ) {
$args = array(
'theme_location' => 'primary',
'menu_class' => 'menu nepalbuzz-nav-menu',
'container' => false
);
wp_nav_menu( $args );
}
This code goes to your custom theme file where you want to display menu
Use this in your functions.php
register_nav_menus(
array('header_menu' =>'This is Header Menu'));
to display this menu use this code where you want to display your menu
wp_nav_menu(array('theme_location'=>'header_menu','container'=>''));
Please use register_nav_menus()
So that you can create a custom Menu for your theme. Like
function register_theme_menu() {
register_nav_menu( 'primary', __( 'Primary Menu', 'theme-slug' ) );
}
After that add the menu by "after_setup_theme" hook like
add_action( 'after_setup_theme', 'register_theme_menu' );
The full code is like in you fuctions.php file.
add_action( 'after_setup_theme', 'register_theme_menu' );
function register_theme_menu() {
register_nav_menu( 'primary', __( 'Primary Menu', 'theme-slug' ) );
}
get full info from https://codex.wordpress.org/Function_Reference/register_nav_menu
using WooCommerce I put this snippet in function.php to define the size of images overwriting the panel settings :
function yourtheme_woocommerce_image_dimensions() {
$single = array(
'width' => '400', // px
'height' => '300', // px
'crop' => 1 // true
);
$thumbnail = array(
'width' => '180', // px
'height' => '135', // px
'crop' => 1 // false
);
$catalog = array(
'width' => '140', // px
'height' => '105', // px
'crop' => 1 // true
);
// Image sizes
update_option( 'shop_single_image_size', $single ); // Single product image
update_option( 'shop_thumbnail_image_size', $thumbnail );
update_option( 'shop_catalog_image_size', $catalog ); // Product category thumbs
All works fine but now I'd like to set different image sizes relating to $catalog just in single product page (where there's a widget showing that images).
I've tried with conditional statements, cause I don't want to use css tricks, but without luck.
Any help will be appreciate.
Thank you.
Did you re-generate the thumbnails after changing the size? If no, than try force regenerate thumbnails plugin to re-generate images that will have new sizes. When indicating new size in Wp functions, than it will affect new uploads but you also need to regenerate new sizes for previously uploaded ones.
I am building a custom theme and trying to customize the sizes list of media library,but did not work for me, i`m using the code in codex
add_image_size( 'custom-size', 220, 180, true );
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'custom-size' => __( 'Your Custom Size Name' ),
) );
}
Note: I`m using Wordpress 4.1 :)
the image size name doesn't match in your array_merge function
'your-custom-size' => __( 'Your Custom Size Name' ),
should be
'custom-size' => __( 'Your Custom Size Name' ),
A lot of time has passed (and I'm on WordPress 4.7), but I was having the same issue tonight and found a solution. Instead of
add_image_size( 'custom-size', 220, 180, true );
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'custom-size' => __( 'Your Custom Size Name' ),
) );
}
I had to refactor my code to pass my function as the second parameter to add_filter, like so:
add_image_size( 'custom-size', 220, 180, true );
add_filter( 'image_size_names_choose', function ( $sizes ) {
return array_merge( $sizes, array(
'custom-size' => __( 'Your Custom Size Name' ),
) );
} );
I came up with this solution after right-clicking the empty 'Size' dropdown on the Media select screen and choosing 'Inspect Element', which allowed me to see the error. I'm not sure if changes in WordPress or my host (Site5) caused the issue, but I hope this answer will help someone.