#73159 Show acf custom product tabs on product page

Landing Forums JupiterX WordPress Theme Show acf custom product tabs on product page

Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • Hugo Weijermars

    Hello,

     

    I’m trying to show the acf custom product tabs on product page but after a few hours of trying i’m giving up. Please help me out 🙂

     

    The acf field show up in the backend (see print screen https://gyazo.com/3c7807d648dbb5151a772674d11511ba but nog in the frontend. I think it’s done with adding a piece of code using the snippits plugin, but cant make it work.

     

    It must show up next to the tabs beschrijving and beoordelingen.
    See printscreen https://gyazo.com/8cebec142185485681006e8ef99d3a95

     

    Hugo Weijermars

    Hello,

     

    I managed to get the fields to show up. Using the code below. But if i try to get the data from first acf shows up in al 3 fields in the frontend. How can i sepperate the 3 fields?

     

    add_filter( ‘woocommerce_product_tabs’, ‘woo_new_product_tab’ );
    function woo_new_product_tab( $tabs ) {

    // Adds the new tab

    $tabs[‘voedingswaarde’] = array(
    ‘title’ => __( ‘Voedingswaarde’, ‘woocommerce’ ),
    ‘priority’ => 50,
    ‘callback’ => ‘woo_new_product_tab_content’
    );
    $tabs[‘bereiden_bewaren’] = array(
    ‘title’ => __( ‘Bereiden & bewaren’, ‘woocommerce’ ),
    ‘priority’ => 50,
    ‘callback’ => ‘woo_new_product_tab_content’
    );
    $tabs[‘product_specificatie’] = array(
    ‘title’ => __( ‘Product specificatie’, ‘woocommerce’ ),
    ‘priority’ => 50,
    ‘callback’ => ‘woo_new_product_tab_content’
    );

    return $tabs;

    }
    function woo_new_product_tab_content() {

    // The new tab content

    echo get_field(‘voedingswaarde’, $post_id);

    }

     

    The fields      echo get_field(‘bereiden_bewaren’, $post_id);  and  echo get_field(‘product_specificatie’, $post_id); also need to be added.

     

    Please help me out 🙂

    Danish Iqbal Support Team

    Hello Hugo,

     

    This is a custom coding request which is a bit time consuming and is out of the scope of this support.

     

    We provide a premium service known as WPDONE for users with custom requests. Please click https://wpdone.artbees.net/

    You can request for a quote and explain your request. The WPDONE will only be able to help you in case, they found the request suitable and not too time consuming.

     

    Regards.

    Hugo Weijermars

    Ok Thanks for the quick reply. Maby you can help me with another problem. The background of the product gallery is black in stead of transparrent. I tried making it white and multiple other options to resolute this problem. See picture

    Hugo Weijermars

    Ow, and i also dont want to show the icons in front of the suopscriptions on the product pages. see picture

     

    Greet Hugo 🙂

    Hugo Weijermars

    I also found a problem with the filters in woocommerce. there nog workine 🙁 Deadeline is this week. Please help me out asap.

    The url is https://meat-vlees.nl/winkel/<!–StartFragment –>
    https://gyazo.com/dfa66652d4c3314826c348e9e98a7ba5

    Danish Iqbal Support Team

    Hello Hugo,

     

    1 – I checked some of the products but cannot see the gallery anywhere. Could you please share the exact site URL on which the product gallery shows?

     

    2 – Do you mean you want to remove the icons from all the tabs on the product page?

     

    Regards.

    Danish Iqbal Support Team

    About the filter issue, have you made this template using the Jet Woo Builder?

    Could you please allow me to deactivate the plugins to debug this issue?

     

    Regards.

    Hugo Weijermars

    Hello Danish,

     

    The woocommerce is suddenly in English. Gues you did that?

    Product page
    The link to the sample product is https://meat-vlees.nl/product/cadeaubon/
    -you can see the black stripe behind the pictures below of the product callery
    -the next picture icon is missing in the white see true circel.
    -If you increase the number of products next to the add to cart button. The price doesnt change

    Product Tabs
    I would like to remove all the icons of the product tabs + make the active tab fillout the whole tab (now there is a white space ont the left and right) + make the submit button dark grey instead of blue

     

    Jet Woo Builder
    The product page and the product list view are both made in Jet Woo Builder so i gues the problem is in this plugin. You can deactivate the plugin for debugging offcourse.

    Hope to hear from you soon 🙂

    Greats Hugo

    Danish Iqbal Support Team

    Hello Hugo,

     

    Product Page:

    1 – The issue is happening because of the Jupiter Donut plugin. The plugin is adding it’s own styles to the page. I see that you are using Jupiter X + Elementor + Raven + Jet Woo Builder, why do you need the Donut plugin?

    For now, I deactivated the donut plugin.

    2 – Same solution as point 1.

    3 – The price shouldn’t change, it’s working fine as expected. The final total price will show in the cart.

     

    Product Tabs:

    1 – To remove the icons from the tabs, I added the below CSS to Customizer -> Additional CSS

    .woocommerce ul.wc-tabs li a::before{
    content: '';
    }

    2 – To add background color to the whole active tab, I added the below CSS:

    .woocommerce div.product .woocommerce-tabs ul.tabs li.active{
    background-color: #eee;
    }

    3 – To change the color of the review form submit button, I added the below CSS:

    .woocommerce #respond input#submit{
    background-color: #b5b5b5;
    border: 1px solid #b5b5b5;
    }

     

    Regards.

    Danish Iqbal Support Team

    Hello,

     

    About the Jet Woo Builder filter issue, after a lot of debugging, I found out that the checkbox filter only works with the JetWooBuilder Product list and Product Grid. It does not work with the Products Loop.

     

    I have added a JetWooBuilder Products List on the shop page and you can see that the filter works with it but not with the Products Loop widget.

     

    Regards.

    Hugo Weijermars

    Hello Danish,

    Thanks for the css adjustment! What is the css to make this button black on hover?

    Donut is installed because we use visual composer to design the website. We really need this plugin because without the design is trashed.
    See with https://gyazo.com/69002795977f39fe011d73ca486ac305
    And without https://gyazo.com/9df3d29eb9cc4a1f4390b6e2028054b6

    Also the settings options are a lot better with the plugin
    with   https://gyazo.com/3ab7bf2b59d2f3eff9fa42cdf7e06269
    Without https://gyazo.com/14355c688bd41c22ef90ad2b7f7dc31c

    I placed a products grid, but the filter does not work on this. Maybe i’m doing something wrong? I also tried adjusting the list to grid, but offcourse this is not possible.

    I think we are almost there 🙂

    Greats Hugo

    Danish Iqbal Support Team

    Hello Hugo,

     

    1 – To add black color on hover, I added the below CSS

    .woocommerce #respond input#submit:hover{
    background-color: #000000;
    border-color: #000000;
    }

     

    2 – The thing is that Jupiter X already comes with a page builder which is Elementor + Raven and it has more widgets than Visual Composer + Donut. You could have easily created anything using Elementor + Raven only.

    I understand Elementor could be a bit overwhelming in the beginning but once you work with it, it would be really great.

    Anyways, you can re-enable the donut and we can try using custom CSS to fix the issues.

     

    3 – You have to first link the checkbox filter to the Jet WooBuilder Products Grid. Edit the checkbox filter and you will see an option “This filter for“, set it to the respective value. Here is a screenshot https://tinyurl.com/yy4453fg

    I linked it and it’s working fine now.

     

    Regards.

    Hugo Weijermars

    Hello Danish,

    Thanks for the help.

    I’m used to visual composer, and jupiter x comes with this plugin so thought this should work both. But next website i’ll try elementor for the pages also. The less plugins the better ofcourse.

    To rebuild the current site in elementor is quite some work, so can you help solve the current issue of the black background in the product page? And let the product callegy pictures align from the left?

    I will redesign the product list page in elementor tomorrow.

    Kind regards Hugo

     

     

    Danish Iqbal Support Team

    Hello Hugo,

     

    Sure, no problem. We can anyway fix the minor problems using the custom CSS.

    To achieve this, I added the below CSS

     

    .woocommerce-product-gallery .slick-slider{
    background: #fff;
    }
    
    .woocommerce div.product div.woocommerce-product-gallery .flex-control-thumbs .slick-track{
    justify-content: normal;
    }

     

    Regards.

    Hugo Weijermars

    Thanks Danish,

    Alsmost there i thinks. 2 new problems occurred.

    It seems that the woocommerce product category does’nt work anymore.  If i go to https://meat-vlees.nl/product-categorie/rundvlees/ it also shows varkensvlees (pork) catagory and all the other catagories. It worked before though.

    Also the sorting on the shopping page disappeared. to filter on price or popularity.

     

    Other questions. I’m trying to make all products to have the same height in my shop, but as soon as one of them have a bit longer name, it’s impossible. I turned on equal colum hights but this doesnt seem to do anything. Is there custum css for this?

    Can you help me out?

    Kind regards Hugo

     

    Tatyana Hutsol Support Team

    Hello,

     

    I see that your product categories pages uses Shop template that you created in JetWooBuilder https://take.ms/HdwYo .

    The reason is you’re using incorrect element for products in the Shop template. You must use only Shop available widgets that are listed in JetWooBuilder settings https://take.ms/yUxHa . So use Products Loop element to show products instead of the “Products Grid” element on the Shop template https://take.ms/j0MrH .

    Try to change it and check the category pages after that.

     

    Thank you.

    Regards.

    Hugo Weijermars

    Hello Tatyana,

     

    Your collegue Danish changed to product grid because product loop didn’t work with the jet filter. See message below
    <div class=”jupiterx-bbp-author-meta”><span class=”bbp-author-name”>”Danish Iqbal</span> <span class=”bbp-support-staff-tag”>Support Team</span> <span class=”bbp-reply-post-date”>1 week, 5 days ago</span></div>
    <div class=”bbp-reply-content”>

    Hello,

    About the Jet Woo Builder filter issue, after a lot of debugging, I found out that the checkbox filter only works with the JetWooBuilder Product list and Product Grid. It does not work with the Products Loop.

    I have added a JetWooBuilder Products List on the shop page and you can see that the filter works with it but not with the Products Loop widget.”

    </div>
     

     

    Tatyana Hutsol Support Team

    Hello,

     

    I removed Products Grid element on the Shop template and added Products Loop, and set Filter type to “Woocommerce Archive” https://take.ms/PKKly . Now the filter is working on the Shop page https://meat-vlees.nl/winkel/ and correct products are shown on the category pages.

    Please check.

     

    Thank you.

    Regards.

    Hugo Weijermars

    Thanks, that worked bether than your collegues idea 🙂

    Last i want to change the color of al the standart buttons to black in stead of blue. Where can we change this? See button on the wishlist page  https://meat-vlees.nl/verlanglijst/   (every new button that apears by a plugin is blue)

    And often when i click the hart icon for the wishlist i get a double link to the wishlist and cart in the samen url. https://meat-vlees.nl/verlanglijst/https:/meat-vlees.nl/winkelmand/

    This is verry strange because the input url is correct.

     

    Tatyana Hutsol Support Team

    Hello,

     

    Add this code in Jupiter X > Customize > Additional CSS:

    .woocommerce #respond input#submit.alt, .woocommerce #respond input#submit.alt:hover, .woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt, .woocommerce a.button.alt:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt, .woocommerce button.button.alt:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt, .woocommerce input.button.alt:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover {
    background-color: #000000 !important;
    border-color: #000000;
    }

     

    As for the link, I see you added Dynamic Field element for the icon and set Permalink option for it https://take.ms/gJdKa . By default it uses the site permalink and you added wishlist link as the prefix https://take.ms/39AVy . It’s incorrect. The prefix should be tel: or mailto:, not the full URL. I recommend you to remove Dynamic Field and use Icon element for the heart icon and you’ll be able to add a custom URL for the icon.

     

    Thank you.

    Regards.

    Hugo Weijermars

    Thank you so much!! You’re the best 😀

    Alexander Hutsol Support Team

    Hello,

    You are welcome.

    We would greatly appreciate it if you could please share your experience in using our product and the Support you’ve received. You can quickly do so by going to the “Downloads” tab in Themeforest. Thank you on behalf of the whole Artbees Team!

    Regards.

    Hugo Weijermars

    Offcourse! 🙂

    Tatyana Hutsol Support Team

    Thank you so much!

    We really appreciate it!

     

    Regards.

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