Product page - by ycs7a - on WordPress WooCommerce support

This topic has 71 replies, 5 voices, and was last updated 7 years, 6 months ago ago by Max Mullins

  • Avatar: ycs7a
    ycs7a
    Participant
    January 12, 2017 at 15:00

    Hi,

    I have several questions about the single product page.

    1. Can I alter the ‘Out of stock’-icon? I wish to place it in the same way as the ‘New’ and ‘Sale’ icon, because then the product is more visible. So that the ‘Out of stock’-icon is just as large as the other two icons (‘New’ and ‘Sale’), on the same height (in the top) and in the middle (to distinguish the ‘Out-of-stock’-icon from the other two icons).

    2. I wish to place a widget in the Header custom HTML. What should I write in order to do this? For instance, I have in mind the Search form that is available as a widget (e.g. the 8Theme Search widget).

    3. Is it possible to fill up the white space in the single product page without changing the current way the page is set up (e.g. position tabs, short description and image)? Please see https://www.dropbox.com/s/e9481hjvyzyath8/space.png?dl=0.

    Thank you kindly:)

    Please, contact administrator
    for this information.
    70 Answers
    Avatar: ycs7a
    ycs7a
    Participant
    January 12, 2017 at 15:06
    Avatar: Eva
    Eva Kemp
    Support staff
    January 12, 2017 at 16:23

    Hello,

    1. Please show a page where you want to make modifications.

    2. You can create a page and add search form using Visual Composer editor, then switch to Classic mode and copy the source code and paste it to Header Custom HTML section.

    3. Sorry, but there is no such option.

    Regards,
    Eva Kemp.

    Avatar: ycs7a
    ycs7a
    Participant
    January 13, 2017 at 17:26

    ‘1. Please see this page. I wish to make an alteration to all products that are out of stock. Please see this image for how the out of stock products are displayed at the moment. This is what I would want them to look like.

    Is this possible? Thank you very much.

    Avatar: ycs7a
    ycs7a
    Participant
    January 16, 2017 at 00:21

    ‘2-3. Thank you.

    4. The texts for the menu in the mobile view is black on a black background. Please see https://www.dropbox.com/s/5u9ke7m52iodn79/mobile%20view.png?dl=0. Could it possibly be written white?

    5. Can I, with WooCommerce Bulk Product Editing, create a ‘window’ just like ‘Product Categories’ and ‘Brands’ so that I may add a ‘Text and titel for custom tab’ for all the products that I have selected? Please see the following image as an example of how it might look: https://www.dropbox.com/s/78fqjywycm383qq/TEXT%20FOR%20CUSTOM%20TAB.jpg?dl=0.

    6. Can I place a Widget to filter products by tags in the sidebar? The YITH Woocommerce filter only focuses on Variable products. I would like a filter focused on tags if possible.

    Thank you kindly.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 16, 2017 at 14:25

    Hello,

    1. Try to add this code in Custom CSS:

    .out-stock {
        top: 22%;
        right: 3% !important;
        left: auto;
        width: 68px;
        height: 68px;
    }
    .out-stock .wr-c {
        font: 10px/15px 'Roboto', Arial, Helvetica, sans-serif;
        margin-top: 16px;
    }
    .out-stock .wr-c .bigT {
        font-size: 12px;
    }

    2.

    .mobile-nav a {
        color: white !important;
    }
    .mobile-nav-heading {
        color: white;
    }

    5. Unfortunately there is no such possibility.
    6. Try to use WooCommerce Product Tags widget.

    Regards,
    Rose Tyler.

    Avatar: ycs7a
    ycs7a
    Participant
    January 17, 2017 at 10:36

    ‘1 and 4. Thank you kindly.

    ‘5. That is unfortunate, thank you.

    ‘6. What I have in mind is a sidebar where I can filter through tags. An example is on this page or the options like on this page. The WooCommerce Product Tags widget only allows me to show tags. Is this possible?:)

    7. Can I remove all at once on the website the information encircled in red in this image?

    8. I have enabled the top bar, resulting in two top bars: one with the ‘EN FR DE £ € $’ and ‘My Account’, and one below that with the cart icon. I have several questions about this:

    A) Can I make the background color of the top bar with the cart in another RGB color? So that e.g. the top bar with MY Account and Log out remains black, whereas the other top bar is grey-white?
    B) I can add content to top bar by going to Appearance > Widgets > “Left Side top bar area”. But can I also temporarily remove the ‘EN FR DE’ writing?
    C) How do I make the ‘£ € $’ valuta work for the website?
    D) When a visitor is new to the website, he or she will see ‘Log in’ as an option in the top bar. How do I add the option ‘Registreren?
    E) I wish to add a white line between ‘Inloggen’ en ‘Registreren’ when it is possible to add this option. In a previous post Eva told me that I should add the following CSS code:

    .top-bar #fcs_widget-5:before {
    content: ”;
    display: inline-block;
    width: 1px;
    height: 7px;
    background: #fff;
    margin: 7px 12px 0;
    }

    What should I alter to this code to make it work in this particular case?:)

    9. Where can I alter the text for the My Account, among others the ‘Dashboard’?

    Thank you.

    Avatar: Eva
    Eva Kemp
    Support staff
    January 18, 2017 at 12:35

    Hello,

    6. Sorry, but there is no such widget.

    7. Please add this code in Theme Options > Custom CSS > Global Custom CSS:

    .page-heading .woocommerce-breadcrumb {
       display: none;
    }

    8. A) Use this css code:

    .header-type-17 .header-top {
        background-color: #1a1a1a;
    }

    Change color value to yours.

    B) When you add the content, the icons will be removed automatically. If you don’t want to add any text for now, just add empty Text widget there.

    C) You need use multi-currency plugin like https://wordpress.org/plugins/woocommerce-currency-switcher/ .

    D) Please read here https://www.8theme.com/demo/docs/royal/#!/4_registration_page how to add Register link.

    E) At first please create Registration page so the link appears in the top bar and then reply back.

    9. Use this css code:

    .woocommerce-MyAccount-navigation-link--dashboard {
        display: none;
    }

    Regards,
    Eva Kemp.

    Avatar: ycs7a
    ycs7a
    Participant
    January 26, 2017 at 21:27

    ‘5. I found the following code for the Bulk Editing checkbox area:

    add_action( 'quick_edit_custom_box', 'display_custom_quickedit_book', 10, 2 );
    
    function display_custom_quickedit_book( $column_name, $post_type ) {
        static $printNonce = TRUE;
        if ( $printNonce ) {
            $printNonce = FALSE;
            wp_nonce_field( plugin_basename( __FILE__ ), 'book_edit_nonce' );
        }
    
        ?>
        <fieldset class="inline-edit-col-right inline-edit-book">
          <div class="inline-edit-col column-<?php echo $column_name; ?>">
            <label class="inline-edit-group">
            <?php 
             switch ( $column_name ) {
             case 'book_author':
                 ?><span class="title">Title for custom tab</span><input name="book_author" /><?php
                 break;
             case 'inprint':
                 ?><span class="title">Text for custom tab</span><input name="inprint" type="checkbox" /><?php
                 break;
             }
            ?>
            </label>
          </div>
        </fieldset>
        <?php
    }
    

    Would this checkbox work for my wishes, or do I need to alter it to make it work for the ‘Text for Custom Tab’? Where should I add it in the theme so that it works?

    ‘7-8b-d. Thank you.

    ‘8a. If I make the top bar white-grey, can I make the ‘€ 0,00’-counter next to the Cart black? Otherwise it will not show the prices.

    ‘9. What I meant was altering the text and display for the My Account, among others the ‘Dashboard’? Please see the text encircled in red which I wish to alter, and possibly add elements to the tabs (such as ‘Orders’): https://www.dropbox.com/s/7l7jvl1j36sh5hq/my%20account%20text.jpg?dl=0.

    10. Which function changes the grey text in the description on for instance this page from grey to black? Thank you.

    11. Is it possible to remove the header menu (in my case, header 17) in the checkout area? The reason is that the checkout area should have the customer remain on the checkout page and focus on the checkout proces.

    12. How can I make the description of this grouped product visible again?: https://www.atelierchristian.nl/webshop/occasion/gouden-zakhorloge-met-horlogeketting/. For some reason the text is written in white.

    13. Can the promo popup be altered so that it pops up in the bottom right corner after several seconds, and disappears again after several seconds? See for an example this site. Thank you

    14. What should I do when the register security code is not visible, as in this case (screenshot).

    For instance: is it possible to have people click on the ‘Registreren’ button and then go to a separate page that will enable them to register?

    15. Do you perhaps know how I can install cookies on my website?

    16. On my Home page the Eight Theme element ‘Brands’ has the counter not working properly: I want to display the four brands that have the most products. Would you perhaps know how I can make it better?

    Thank you very much.

    Avatar: ycs7a
    ycs7a
    Participant
    January 27, 2017 at 12:23

    ‘8a. The same for the Search-icon and the text ‘Cart’

    ’16. Is it possible to have a function similar to the Eight Theme ‘Brands’ element, but where I insert images that do not necessarily lead to a link? Several products of brands (e.g. Casio) have not been added yet, but I do wish the viewer to know that we have this brand but without them going to the brand page (which will only have one or two items).

    Thank you

    Avatar: Eva
    Eva Kemp
    Support staff
    January 27, 2017 at 17:39

    Hello,

    5. It requires additional customization which is beyond our basic support scope. Sorry.

    8a. Use this css code:

    .header-type-17 .header-top .shopping-cart-widget .total, .header-type-17 .header-top .header-search .et-search-trigger .fa-search, .header-type-17 .header-top .shopping-cart-widget .shop-text {
        color: black !important;
    }

    9. Do you mean you want to remove whole sidebar on My Account page?

    10. Do you mean you want to change background color of this form http://storage3.static.itmages.com/i/17/0127/h_1485534508_4691089_13db873b05.jpeg ?
    If so, you need edit this css code in Custom CSS:

    .data-table .even {
        background: #f6f6f6;
    }

    11. Use this css code:

    .page-id-13 .header-wrapper.header-type-17 {
    display: none;
    }

    12. Use this css code:

    .single-product .group_table td.label {
       color: black !important;
    }

    13. Sorry, but there is no such possibility.

    14. You can create redirect rule in .htaccess file to redirect customers to other page. You hosting provider should help you with this.
    I’ve fixed the issue with captcha. Please clear browser cache and check.

    15. You can use some plugin for it.

    16. You can use Single Image element in Visual Composer editor and just upload image of your brand, don’t add link in the settings.

    Regards,
    Eva Kemp.

    Avatar: ycs7a
    ycs7a
    Participant
    January 30, 2017 at 00:50

    ‘5. Thank you, I understand. Do you perhaps know where the code for the Brands bulk editing was placed? I will try to from there:)

    ‘8a. Thank you.

    ‘9. I meant the following encircled in red: https://www.dropbox.com/s/8nmg8m0aspsjsd3/alter%20my%20account.jpg?dl=0. Can I alter and add this?

    ’10. No the text below it. Please see: https://www.dropbox.com/s/eoj282m1ub423o7/grey%20text.jpg?dl=0.

    ’11-15. Thank you.

    ’16. Thank you. Would the function to slide to the right also work then? Please see https://www.dropbox.com/s/agj6vdp3p7nptjb/function.jpg?dl=0

    17. For some odd reason the Out of stock icon is not showing for some sold out products. Please see https://www.dropbox.com/s/q47gfdadil92awz/out%20of%20stock%20not%20showing.png?dl=0 and https://www.dropbox.com/s/2ulm2cdrbzw5khq/out%20of%20stock.png?dl=0.

    Avatar: ycs7a
    ycs7a
    Participant
    January 30, 2017 at 01:00

    18. The lazy load function doesn’t work well always on the site. I’m using WP Rocket. Please see https://www.dropbox.com/s/0att52ixosz3y2l/Schermafbeelding%202017-01-28%20om%2010.20.09.png?dl=0. Is there a way to fix this? Many thanks:)

    Avatar: Eva
    Eva Kemp
    Support staff
    January 30, 2017 at 09:45

    Hello,

    5. You can find the code in wp-content/themes/royal/framework/woo.php in line 513.

    9. Unfortunately there is no such feature. As My Account page was configured by Woocommerce, you can ask their support regarding this possibility.

    10. Use this css code:

    .tabs .tab-content p {
        color: black !important;
    }

    16. In this case try to use Image Gallery element.

    17. Please show a direct product page which is out of stock.

    18. Could you please check if the issue persists with default Woocommerce theme Storefront?

    Regards,
    Eva Kemp.

    Avatar: ycs7a
    ycs7a
    Participant
    January 30, 2017 at 10:36

    ‘5, 9-10 and 16. Thank you kindly.

    ’17. Please see this page (under Related products) and this image. This product is out of stock, yet it does not have the ‘Out-of-stock’-icon written over it.

    ’18. Do you mean to install the theme Storefront on another website and then see if it is WP Rocket lazy load compatible? Or should I install it on my main website?:)

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 30, 2017 at 15:35

    Hello,

    Use this css code:

    .out-stock {
        display: block !important;
    }

    Please activate default Woocommerce theme Storefront on your main website, check if the problem persists and let us know the result. If you activate Storefront theme your content will be saved, only template will be changed, but you’ll get it back once switch to Royal again.

    Regards,
    Rose Tyler.

    Avatar: ycs7a
    ycs7a
    Participant
    February 2, 2017 at 22:44

    ’17. That worked, thank you.

    ’18. I have enabled the theme Storefront, but I see the products in question. Please see https://www.dropbox.com/s/tmp6zty7e4bglns/storefront.png?dl=0.

    Avatar: Eva
    Eva Kemp
    Support staff
    February 3, 2017 at 17:21

    Hello,

    Are you using any plugin for lazy loading?
    Do you want to lazy load products on Shop page and on home page too?

    Regards,
    Eva Kemp.

    Avatar: ycs7a
    ycs7a
    Participant
    February 4, 2017 at 00:27

    Yes, I use Lazy Load from WP Rocket. I want to lazy load every page due to page speed.

    Avatar: ycs7a
    ycs7a
    Participant
    February 4, 2017 at 15:45

    19. Do you know how to get the colour filter for products as on this website? Thank you:)

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    February 6, 2017 at 12:05

    Hello,

    You can use this plugin https://wordpress.org/plugins/color-and-image-swatches-for-variable-product-attributes/ .

    Best regards,
    Jack Richardson.

    Avatar: ycs7a
    ycs7a
    Participant
    February 6, 2017 at 14:08

    ’19. Thank you Jack.

    ’18. I have a question regarding the lazy load function for my Home page. I am using WP Rocket, but the product images do not load correctly on the Home page.

    How can I solve this?

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    February 6, 2017 at 16:38

    Hello,

    Could you please clarify how the product images should be loaded?

    Thank you.
    Best regards,
    Jack Richardson.

    Avatar: ycs7a
    ycs7a
    Participant
    February 6, 2017 at 18:34

    Hi Jack,

    The images should be loaded in a way that shows the entire image. Please compare this image to this image.

    Due to the lazy load from WP Rocket, the images do not load correctly.

    Avatar: ycs7a
    ycs7a
    Participant
    February 7, 2017 at 11:20

    ’10. When I use the following code, the text became black, but the links were gone too.

    .out-stock {
        display: block !important;
    }

    Please compare this image to this image.

    Is there a way to make the text black, but to have the links readily visible (e.g. in its distinctive golden colour)? Thank you

    20. How can I ensure that the mobile view doesn’t show every gemstone below each other, but rather in groups of four (as I made them in the Static Block row)? Please see this image. The desktop version is fine and clear, but the mobile version unfortunately is not.

    21. Is it possible to have a ‘+’ in the Product Categories, so that the Category is automatically folded? Please see this image.

    For instance, at the moment the Category ‘Exclusief’ has subcategories which are automatically unfolded (‘+’).

    I want to make sub-categories for my other Categories as well. Yet, as the image shows, the Category ‘Ringen’ is automatically unfolded, displaying a ‘–’ rather than a clickable ‘+’. How do I the effect of making it automatically folded (‘+’)?

    22. I cannot directly edit a page by using Visual Composer. I need to login to the admin page, and edit it from there. Do you know how I can edit the page frontend without having to login first to the admin page -> look up the page -> edit it from there etc.?

    Thank you kindly

    Avatar: Eva
    Eva Kemp
    Support staff
    February 7, 2017 at 17:51

    Hello,

    10. Please use this code for links:

    .tabs .tab-content a {
      color: #cda85c !important;
    }

    20. Add this code in Custom CSS for mobile section:

    .custom-widget .vc_column_container {
        width: 25% !important;
        float: left !important;
    }

    21. You can close the first category by editing wp-content/themes/royal/js/etheme.js file. Find and comment out line 1828
    $this.find('>li').first().find('.open-this').html(minusIcon).parent().addClass('opened').find('ul.children').show();

    22. Sorry, but to be able to edit pages you should be logged in as admin at first.

    As for lazy loading, I don’t see any issues. The images are loading fine http://storage7.static.itmages.com/i/17/0207/h_1486486272_9559534_045e7ff1c3.jpeg .

    Regards,
    Eva Kemp.

    Avatar: ycs7a
    ycs7a
    Participant
    February 7, 2017 at 19:51

    ’10. Thank you. When I inserted the code, then all the images were gone for some reason. Even on the Home page. Please see this image. Would you please try added the following two codes and seeing the effect? Thank you.

    .tabs .tab-content p {
    color: black !important;
    }
    .tabs .tab-content a {
    color: #cda85c !important;
    }

    ’20. Thank you kindly this worked well.

    ’21. I have found the following code in that directory:

         $this.find('>li').first().find('.open-this').html(minusIcon).parent().addClass('opened').find('ul.children').show();
            }
    

    What should I write? Something like the following?

         $this.find('>li').first().find('.<strong>close</strong>-this').html(minusIcon).parent().addClass('opened').find('ul.children').show();
            }
    

    ’22. Thank you. I meant something like the top black row as in this video. There you see ‘Edit with Virtual Composer’, ‘Customise’ etc. when you are logged in. Is it possible to directly edit a page in that way?

    Avatar: ycs7a
    ycs7a
    Participant
    February 8, 2017 at 11:32

    ’21. Thank you, I wrote ‘/*’ and ‘*/’ to comment the line out. This worked well.

    Avatar: Eva
    Eva Kemp
    Support staff
    February 8, 2017 at 18:00

    Hello,

    10. I’ve added the code and don’t see any issues:
    http://storage3.static.itmages.com/i/17/0208/h_1486572827_3010611_9547111264.jpeg
    Please clear browser cache and check again.

    22. Thank you. I understand you now.
    By default that link is available, but as I see you don’t have it as well as WordPress toolbar isn’t shown on your site when logged in.
    Have you disabled it somehow? Maybe via hosting control panel. It may be the reason for VC editor too.

    Regards,
    Eva Kemp.

    Avatar: ycs7a
    ycs7a
    Participant
    February 17, 2017 at 17:13

    ’22. I unfortunately have not been able to find the solution.

    23. Is it possible to only display items that are still in stock under ‘Related Products’? Please see this page and this image.

    24. Do you perhaps know whether a plugin exist to display the order time? I am looking for a plugin that displays a timer above the header on product pages, and beneath the product description of the single product pages.

    Please see this image and this image.

    Let’s say its 2 pm, and we deliver the next day if the customer places an order within the next 3 hours: before 5 pm. So the timer in the header will display: ‘[clock icon] Order within 2 hours and 59 minuten and get order delivered to you tomorrow’. The timer for each single product would be a timer but smaller. The timer needs to reset every day at say 5 pm.

    Is there such a plugin? Thank you kindly.

  • 1 2 3
    Viewing 30 results - 1 through 30 (of 71 total)

The issue related to '‘Product page’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.