Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #1741474
Add custom image to product page headers
Closed

Comments

  • Jade started the conversation

    How do you add an image as the Page header for woocommerce single product page? There seems to be no easy way to do it when it should be an option instead of header colour there's no option to add image instead. Can you tell me how


    Thanks

  •  7,095
    Oliver replied

    HI!

    Sorry, can you add some screenshots to describe what you need to make in detail? Thank you. 

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  • Jade replied

    There is only 1 option to add a Header image background which would make it the same all throughout the site. I see there's option to have different background image per page but why is there option for difference header image?

  •  7,095
    Oliver replied

    Hi,

    It's can be added here: 

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Jade replied

    Great. Thanks. My mistake. If I don't enable title , background image don't appear either...the whole Background image (if rename to header background image not so confusing). Been trying all day!! Got it now. THanks!

  •  7,095
    Oliver replied

    Feel free to contact us if you need help.

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    pls. give me link to this page

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Jade replied

    That's the related products at the bottom of single product page as well as on shop page they all appear like that 

    Like in your demo 

    https://codex-themes.com/thegem/shop/

    instead of the icons. Just want wordings


  •  7,095
    Oliver replied

    HI!

    pls. use following css:

    .products .inline-column .product-bottom .add_to_cart_button:after {
        content: 'SHOP';
        position: relative;
        display: inline-block;
        font-size: 16px;
        vertical-align: middle;
    }
    .products .inline-column .product-bottom .add_to_cart_button:before {
        display: none;
    }

     

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Jade replied

    That worked. Thank you!

  •  7,095
    Oliver replied

    Welcome!

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Jade replied

    Hi. How do I use my own social icons that appears in the hamburger menu? See attached. I have the PNG images of the icons I want to use.

  •  7,095
    Oliver replied

    Hi,

    Add your icons to the child theme:

    Adding your own icons

    Then provide the wp-admin and FTP access, I'll add it for you.

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Jade replied

    Surely there's an easier way?? I'm trying to use my own image not draw an icon...

  •  7,095
    Oliver replied

    pls. provide the FTP access

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    Hi,

    Sorry for delay, can you provide the wp-admin access?

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •  7,095
    Oliver replied

    And access to the http authorization. 

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    Hi,

    There are no social icons in the menu, pls. attach screenshot how it should look like.

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •  7,095
    Oliver replied

    Forgot an attach

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    Ok, 

    1. Add this icons to the media library, give me link to this images there

    2. Add the social you need to show in the theme options. 

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  • Jade replied

    Sorry...misunderstood you. I've just added the links under theme socials

  •  7,095
    Oliver replied

    HI!

    pls. use following css:

    .li.menu-item.menu-item-widgets .socials-item-icon.facebook:before {
        background-image: url('https://mockups.airamplify.com/wp-content/uploads/2018/10/iconmonstr-twitter-1-240.png');
        background-size: 100%;
        height: 30px;
        width: 30px;
        color: transparent;
    }
    .li.menu-item.menu-item-widgets .socials-item-icon.twitter:before {
        background-image: url('https://mockups.airamplify.com/wp-content/uploads/2018/10/iconmonstr-twitter-1-240.png');
        background-size: 100%;
        height: 30px;
        width: 30px;
        color: transparent;
    }
    .li.menu-item.menu-item-widgets .socials-item-icon.instagram:before {
        background-image: url('https://mockups.airamplify.com/wp-content/uploads/2018/10/iconmonstr-instagram-11-240.png');
        background-size: 100%;
        height: 30px;
        width: 30px;
        color: transparent;
    }

     

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Jade replied

    HI


    Doesn't work. Added. Nothing even after refresh. did you try?

  •  7,095
    Oliver replied

    Check now

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Jade replied

    It appeared for a split second. Now gone again. Can I add it under the child themes CSS or I have to add it in that custom CSS box you showed?

  •  7,095
    Oliver replied

    Don't add the dot in the begin, there was my mistake, code should be:

    li.menu-item.menu-item-widgets .socials-item-icon.facebook:before {
        background-image: url('https://mockups.airamplify.com/wp-content/uploads/2018/10/iconmonstr-facebook-1-240.png');
        background-size: 100%;
        height: 30px;
        width: 30px;
        color: transparent;
    }
    li.menu-item.menu-item-widgets .socials-item-icon.twitter:before {
        background-image: url('https://mockups.airamplify.com/wp-content/uploads/2018/10/iconmonstr-twitter-1-240.png');
        background-size: 100%;
        height: 30px;
        width: 30px;
        color: transparent;
    }
    li.menu-item.menu-item-widgets .socials-item-icon.instagram:before {
        background-image: url('https://mockups.airamplify.com/wp-content/uploads/2018/10/iconmonstr-instagram-11-240.png');
        background-size: 100%;
        height: 30px;
        width: 30px;
        color: transparent;
    }
    

    It's working now, pls. check

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  • Jade replied

    Perfect! Works great. Didn't notice the dot.

    Thanks!!!

  •  7,095
    Oliver replied

    You're welcome!

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    Hi,

    pls. give me link to this page

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    pls. use following css:

    .portfolio-filters a:first-child {
        display: none;
    }

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •  7,095
    Oliver replied

    Sorry, there are no simple way to put it in the end without the code changes in the gem elements plugin. (If you'll make it after the plugin update your revisions will be removed)

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •   Jade replied privately
  •  7,095
    Oliver replied

    Hi,

    1. CSS:

    .portfolio:not(.hover-horizontal-sliding) .portfolio-item .image .image-inner img {
        border: none !important;
    }
    

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    Hi,

    Use full-width shortcode for adding parallax images:

    https://codex-themes.com/thegem/documentation/#100-width-parallax-areas

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    Hi,

    Sorry, we don't have such functionality in the theme, try to look third-party plugins for this needs. 

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    Hi,

    pls. add few screenshots what you need to change

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver

  •   Jade replied privately
  •  7,095
    Oliver replied

    Sorry, you need to make this block in the container? Set there 1212 px width?

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver