Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #164692

    I’m using WooCommerce with the Propulsion theme and can’t figure out how to change the image size that appears on the single product page. Changing image sizes in the various places where they can be configured doesn’t seem to matter. The image is still the full width of the content area. I’d like to change it so that I an put the image price and options to one side of the image. What am I missing?

    • This topic was modified 10 months ago by  rwwood.
    • This topic was modified 10 months ago by  rwwood.
    #164723

    Hey rwwood!

    Edit the product, look for Slideshow Options > Slideshow Size on single entries? > select “Adjustable Slider”. Remove browser cache then reload the page.

    Regards,
    Ismael

    • This reply was modified 10 months, 1 week ago by  Ismael.
    #164819

    That option is already set to adjustable. Clearing the cache didn’t change anything, but I finally got the problem halfway solved. The image no longer stretches to the full width of the content area, but I still can’t adjust it’s size. It currently takes up about 1/3 of the content area and I’d like to make it a bit larger. The image size is configured to be 450 by 355, and that’s the size of the image if I download it, but not the size displayed on screen in the theme. If it actually displayed at the size it’s configured to, it would be the size that I want it. I’m still missing something and can’t for the life of me figure out what it is.

    #165084

    Hello!

    It should span or inherit the whole content container width. Can you give us a link to the page with the slider?

    Cheers!
    Ismael

    #165229

    The URL for the page is http://5050photography.org/product/test-product/ But I don’t want the image to span the whole content container, only about half the width of the page.

    The css for the image container is:
    .container .four.units {
    width: 290px;
    }

    If it were .container .six .units, it looks like the image width would be about the right size. I’m just not that familiar with how the 960 grid templating system works, nor with where to make that change.

    Thanks for your help.

    #165928

    Hi!

    In the theme files you’ll need to modify the wrapper functions for the summary and image. Look for this for the function that encloses the images:

    #
    # single page thumbnail and preview image modifications
    #
    

    and this for the summary:

    
    function avia_add_summary_div()
    {
    	global $avia_config;
    	$units = "eight";
    	//if(!empty($avia_config['slide_output'])) $units = "nine";
    
    	echo "<div class='$units units'>";
    }
    

    Best regards,
    Devin

    #166169

    Thanks for your help. That appears in the /config-woocommerce/config.php file, which is a part of the core theme files. How would I override that in a child theme?

    Thanks again.

    #166999

    bump

    #167027

    Hey!

    Move the modified function to the child theme functions.php file.

    Cheers!
    Josue

    #167124

    OK, but if I move it, that means that it will still get rewritten to the original location when the theme is updated, right?

    #167401

    Hello!

    No, it won’t be overwritten when you use a child theme. The main theme files will be overwritten but not the child theme’s files.

    Best regards,
    Ismael

    #167432

    Then I’m not sure I understand what you’re telling me to do. If I move a function from the parent theme’s config.php file to the child theme’s functions.php file, that function is no longer in the config.php file. So when I update the parent theme, the config.php file will get replaced with the new one which includes the function that was originally moved from there. What am I missing here?

    #167476

    Hello!

    My bad! Maybe I’m not clear enough. I mean, if you move the code on the child theme’s functions.php it won’t be affected when you update the theme. Yes, the config.php on the parent theme will be rewritten if in case you upgrade the theme but WordPress will always prioritize the functions you set on the child theme’s functions.php.

    Regards,
    Ismael

    #167565

    If the function exists in both locations, I get a blank page when I refresh the browser. In other words, WP is trying to load both functions and causing a fatal error:
    [27-Sep-2013 14:37:51] PHP Fatal error: Cannot redeclare avia_woocommerceproduct_prev_image() (previously declared in /home3/fivzerh7/public_html/wp-content/themes/5050photography/functions.php:13) in /home3/fivzerh7/public_html/wp-content/themes/propulsion/config-woocommerce/config.php on line 360

    WordPress is not giving priority to the functions set in the child theme. Perhaps it does if the function in question is originally in the parent theme’s functions.php, but not if it’s a function from another file. So, moving the function to the theme’s functions.php file works until the function gets re-written to the parent theme’s woocommerce/config.php file.

    Thanks again.

    #168045

    Hi!

    Yes, actually you can’t overwrite the function because we don’t use function_exists() to check if the function already exists in the child theme code. However you should be able to duplicate the code into a child theme php file and to rename the functions. Then use this code

    
    add_action( 'after_setup_theme', 'avia_overwrite_woocommerce_hooks', 1);
    function avia_overwrite_woocommerce_hooks()
    {
    remove_action( 'woocommerce_before_single_product_summary', 'avia_woocommerceproduct_prev_image', 1,  2);
    remove_action( 'woocommerce_before_single_product_summary', 'avia_add_summary_div', 2);
    
    add_action( 'woocommerce_before_single_product_summary', 'child_avia_woocommerceproduct_prev_image', 1,  2);
    add_action( 'woocommerce_before_single_product_summary', 'child_avia_add_summary_div', 2);
    }
    

    and instead of child_avia_woocommerceproduct_prev_image and child_avia_add_summary_div insert the function names you have chosen for your modified functions in you child theme files.

    Cheers!
    Peter

    #168195

    Well, that sure looks like it should do what I want, but in actuality it doesn’t. I have the following in my child-theme functions.php file followed by the five functions referred to in the hooks, but the page still displays the original avia function output.
    add_action( ‘plugins_loaded’, ‘avia_overwrite_woocommerce_hooks’, 1);

    function avia_overwrite_woocommerce_hooks()
    {
    remove_action( 'woocommerce_single_product_summary', 'avia_woocommerce_output_related_products', 60);
    remove_action( 'woocommerce_before_single_product_summary', 'avia_woocommerceproduct_prev_image', 1,  2);
    remove_action( 'woocommerce_before_single_product_summary', 'avia_add_summary_div', 2);
    remove_action( 'woocommerce_after_single_product_summary',  'avia_close_summary_div', 1000);
    remove_action( 'avia_add_to_cart', 'woocommerce_template_single_add_to_cart', 30, 2 );
    
    add_action( 'woocommerce_single_product_summary', 'fiftyfifty_woocommerce_output_related_products', 60);
    add_action( 'woocommerce_before_single_product_summary', 'fiftyfifty_woocommerceproduct_prev_image', 1,  2);
    add_action( 'woocommerce_before_single_product_summary', 'fiftyfifty_add_summary_div', 2);
    add_action( 'woocommerce_after_single_product_summary',  'fiftyfifty_close_summary_div', 1000);
    add_action( 'fiftyfifty_add_to_cart', 'woocommerce_template_single_add_to_cart', 30, 2 );
    }

    After posting the above, I did some further checking and discovered that the parent theme’s functions.php loads after the child theme’s functions.php, which means that the above code would get run and then overwritten by the original functions because they would they of the load order. So I changed plugins_loaded to after_setup_theme, which loades after the parent theme functions.php. That fixed it.

    Thanks.

    • This reply was modified 10 months ago by  rwwood.
    • This reply was modified 10 months ago by  rwwood.
    #168589

    Hey!

    Great. Yes, the child theme functions.php always loads before the parent theme code otherwise the function overwrite wouldn’t work. However I thought that the plugins_loaded hook is triggered after the functions.php code is loaded but obviously it’s not. I corrected the code above.

    Cheers!
    Peter

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘(resolved) How to change image size on product page’ is closed to new replies.