Home Forums Pro Themes Yummy Pro Customize products pages backgroung and header

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #59897
    Lin Jiang
    Participant

    Hello, everybody.
    I’m using Yummy pro for a sushi restaurant take away.
    My problem is that I cannot manage to change background and header images on inner pages of shop and product. (I use woocommerce plugin).
    In other words I want to change strawberry img (header) and traditional dishes (backgroud) imgs with a custom img.
    Thank you.

    #59965
    wensolutions
    Keymaster

    Hello @yisushiforyou,

    The theme has already provided the option where you can set the header image for the individual page through the meta option available in the individual post.

    For shop page go to Admin Panel > Pages > All Pages > Shop Page . There you will find the Yummy Pro meta option. Here in Header Image option chose Enable Featured Image option and whatever image you upload in the Featured image section of Shop page will appear as the header image.

    Screenshot:

    https://image.prntscr.com/image/mf_jHZMUTh6PZ1diAoZhew.png

    As for the background image, you can change the image from the Customizer itself. Just go to Admin panel > Appearance > Customize > Background image . But the image upload here will be on the entire site.

    If you want to change the image of orange, plates etc that is in the background of sho page you have to customize the code itself.

    For this, you have to activate the child theme. You can activate the child theme using the plugin given below.

    https://wordpress.org/plugins/wp-child-theme-generator/

    After activating the child theme in your child theme functions.php file paste below-given code and place your desired image URL .

    https://gist.github.com/anonymous/b79a8cbbe7ee28a6c065076f15b5c0c8

    As for the specific product page theme does not have a feature to set specific header image and background image.

    Hope this helps.

    Best Regards!!

    Have a good day.

    #60432
    Lin Jiang
    Participant

    Hello and thank you for your answer.
    But the problem is not in the Shop page, for which I have already set your instructions. The problem with the header image, and with background dishes are in single product pages, since from “All pages” is not possible to reach the single product pages and set them as I want.

    Thank you!

    #60450
    wensolutions
    Keymaster

    Hello @yisushiforyou,

    Since the product comes from the WooCoomerce, there is no option in theme to upload the header image for each individual product page.

    However, you can add the header image for each product page using the ID of the product but it would be tedious because there are so many products for which you need to add the header image. But here is the solution for two different cases.

    If you want the same header image for all product page the use below given CSS.

    .single-product section#banner-image {
       background-image: url(http://localhost/wordpress/wp-content/uploads/2017/11/cinque-terre-279013_640.jpg)!important;
    }

    If you want to change the header image for individual product page then you have to use the id of that page. For this use below given CSS.

    .single-product .postid-1774 #banner-image {
       background-image: url(http://localhost/wordpress/wp-content/uploads/2017/11/cinque-terre-279013_640.jpg);
    }

    Here replace the image URL with your image URL and replace the ID with the ID of that product page.

    Screenshot:
    https://image.prntscr.com/image/09pGwey6S9eqDXgzW3y4dw.png

    Now to change the image of the dishes in individual paste below-given code in your child theme functions.php file.

    https://gist.github.com/anonymous/fa9a798510432320ecf25d2f6c0c6d35

    Hope this helps.

    Best Regards!!

    #60451
    Lin Jiang
    Participant

    Thank you very much, now I’m goig to try. I will use the same header image for product.
    Ust another question: and if I want to set no background (no dishes) on all product pages, what I have to do?
    Thank you very much for your help.
    Best regards

    #60524
    wensolutions
    Keymaster

    Hello @yisushiforyou,

    IF you do not want to display any image in single product page then please add below given code in your child theme functions.php file.

    function yummy_pro_child_remove_image(){
    
    remove_action('woocommerce_after_main_content', 'yummy_pro_before_product_end', 10);
    	remove_action( 'woocommerce_after_single_product', 'yummy_pro_single_product_end', 20 );
    }
    add_action('init','yummy_pro_child_remove_image');

    Hope this helps.

    Best Regards!!

    #60548
    Lin Jiang
    Participant

    Hello, thank you very much. The CSS for single product header is ok.
    The very last question. Could you please provide me the CSS code to set “no sidebar” on all product pages? In this way, I think, the background will be white.
    Thank you.

    #60581
    wensolutions
    Keymaster

    Hello @yisushiforyou,

    Actually there is no sidebar displayed in the product pages .

    Also, the code we have provided above will remove the images in all single product page thus making the background white.

    Hope this clears the confusion.

    Best Regards!!

    #60804
    Lin Jiang
    Participant

    Ok, thank you!

    #60813
    wensolutions
    Keymaster

    Hello @yisushiforyou,

    Glad we could help you !!

    If you have any issues further, please feel free to post your queries and we will happily help you further.

    We will really appreciate if you could help us too by rating our theme in WordPress repo here:-

    https://wordpress.org/support/theme/yummy/reviews/

    Best regards !!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.