Strange Look on My Shop and Product Category Page

Hi…

I am sorry.. I need help..
I haven’t been working on my site for a few months..
But, when I check, I got this problem..
Please check and help..

Thank You..

I don’t know why… But, after I check my theme again, the codes I got from You which I have inserted into the custom css area in the theme setting, they are all gone now. So, I decided to reenter all the codes, but it just doesn’t work.

I also deleted the CMB2 and Redux Framework plugin since I read on themeforest that those plugins are no longer required.

The same thing also happens on my single product page. I don’t know why… Please help..

Hello,

I do not understand the problem in full. I see screen what is wrong? Do you mean categories in the title? If so, you can disable them in the Theme Settings > Shop > Categories in the Shop title

Please list the problems one by one with the screens and more details.

Best Regards

Hi…

I am sorry that I didn’t specify the problems..
Please check the product category page..
https://www.furnihere.com/products/synthetic-rattan-furniture/

and the product page…

https://www.furnihere.com/product/classic-wooden-chair/

We know that those pages aren’t ok…
Do You see the problems?

Thank You…

Hello,

Please deactivate all the plugins not related to the theme and switch the parent theme, check the issue, if the problem remains, leave the plugins not activated and provide the site admin access to the private area

Best Regards

Hi…
I have deactivated all the plugins and switched to the parent theme.
But, if You pay a visit to my site, the menu in the header now looks very bad.
Also, what to do next? I need those plugins.
And also, please.., could You check the custom css area in the theme setting? I have added the old codes which are used long time ago to fix some errors between plugins and themes.

Thank You very much…

Hi…
I have deactivated all the plugins and switched to the parent theme.
About the bad looking header, now it is fixed.
However, what to do next? I need those plugins.

And also, please.., could You check the custom css area in the theme setting? I have added the old codes which are used long time ago to fix some errors between plugins and themes.

Thank You very much…

Hello,

Now, activate the plugins one by one checking the issue to detect the plugins which cause the problem, delete it or replace. All the rest plugins can be activated.

As for the custom CSS checking, such is not covered by our support. You can delete and see what has been broken or not and detect which code is necessary and which is not. Please note: often CSS classes contain the plugin title or its part so that you could detect which CSS relates to this or that plugin.

Best Regards

Hi..

Thank You…
I have activated all the plugins. And everything is fine.

Just for Your information, the CSS codes in the Custom CSS fields of Your theme are from X-Temos team. Those codes were for my old site (olhut.com) which is now not active. And now I am installing two sites (furnihere.com and furniturerotansintetis.com) by using Your WoodMart with different licenses. So, I try to insert those codes again into the new two websites. Also, as suggested by one of Your team which as I have done to my first site (olhut.com), I try to make a new folder and file and codes inside the woodmart child theme. Apparently, that new folder and file and codes caused the site to have bad looks. So, now I also have removed those things too.

Those my new two sites (furnihere.com and furniturerotansintetis.com) are using Your theme with different licenses. As long as I remember, all the settings of the plugins and of the theme are same. Those two sites don’t use child theme now and only use parent theme. And here are the problems..

In Your theme setting, in Shop->Products Style->Hover on Product, when I use quick style, I got this http://prntscr.com/p2x813
Please take a look at that screenshot. And here are the problems:

1. I want to completely deactivated Your variation feature and remove that “Select Options” button. I have deactivated Your variation feature but I can’t remove that “Select Options” button which will take us to the product page when it’s clicked.

2. That is the variations from YITH plugin. I want to use it. But, somehow, it just doesn’t work correctly. Because when I select or chose one of the options, the add to cart button/icon doesn’t show up. The correct is that when I select and chose one of the options, the add to cart button/icon must show up. But, it just doesn’t work that way.

3. That is the quick view from YITH plugin. I want to use it. But, when You move Your mouse pointer over the that “Quick View” button, the add to cart button shows up. It is not right. Because it must not show the add to cart icon. It’s ok if whether we can change it into the quick view icon or make the “Quick view” button without showing any icon at all.

Those are the problems when I use the quick style.

But, when I use the show summary on hover style, I got this http://prntscr.com/p2xcu9. It is just not any better than the quick style. I want the all the buttons to show if I use the show summary on hover style just like when I use the quick style, but I do not know how to do that.

I am sorry for all the long words. Please help me to achieve those things and resolve those problems, as those problems have been resolved before by XTEMOS team by giving me some codes. I just do not know how to do that again. Because after so many updates of the theme, the codes You gave me before (for olhut.com) just don’t work anymore.

Thank You.

Hello…. I am sorry.. Are You there?

Hi,

If you want to use your previous custom CSS styles from “olhut.com” (https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/page/2/#post-45048) you also need to add some additional code to your child theme files that we provide you for “olhut.com” in the following post (https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/#post-44948).

Also, make sure you named child theme folder right like we suggest you hear (https://xtemos.com/forums/topic/need-help-5/#post-104930) and paste custom code without broken code before and without missing brackets (https://xtemos.com/forums/topic/need-help-5/#post-104940).

Kind Regards

Dear Bogdan…
Thank You for helping..
I have done all that You suggest, but that just doesn’t work.. The first problem happens again..
This is my product category page http://prntscr.com/p3jm0x
And this is my product page http://prntscr.com/p3jm9d

Have I done it wrong? Or, do I miss something?

And, do I need to use this too? https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/page/2/#post-45081
Because I didn’t use it.
But I applied https://xtemos.com/forums/topic/need-help-5/#post-104937

However, the results are just not same with olhut.com although I think that everything on furniturerotansintetis.com is same with olhut.com.

I am sorry.. But…, just for Your information, if I am not making any mistake, it seems that adding this additional code to my child theme files that You provide me for “olhut.com” in the following post is the main cause that makes my site has strange look. But, I don’t it for sure. However, I think I have applied all Your suggestion. (https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/#post-44948).

Please help..

Thank You very much…

Hi,

We have updated Child theme code. Try to replace the previous child theme code to this one.

<?php 
global $product;
do_action( 'woocommerce_before_shop_loop_item' ); ?>
<div class="content-product-imagin"></div>
<div class="product-element-top">
    <a href="<?php echo esc_url( get_permalink() ); ?>" class="product-image-link">
        <?php
            do_action( 'woocommerce_before_shop_loop_item_title' );
        ?>
    </a>
    <?php woodmart_hover_image(); ?>
    <div class="wrapp-swatches"><?php echo woodmart_swatches_list();?><?php woodmart_compare_btn(); ?></div>
    <?php woodmart_quick_shop_wrapper(); ?>
</div>
<div class="product-information">
    <?php
        do_action( 'woocommerce_shop_loop_item_title' );
    ?>
    <?php
        woodmart_product_categories();
        woodmart_product_brands_links();
    ?>
    <div class="product-rating-price">
        <div class="wrapp-product-price">
            <?php
                do_action( 'woocommerce_after_shop_loop_item_title' );
            ?>
        </div>
    </div>
    <div class="fade-in-block">
        <div class="hover-content">
            <div class="hover-content-inner">
                <?php 
                    if ( woodmart_get_opt( 'base_hover_content' ) == 'excerpt' ) {
                        the_excerpt(); 
                    }else{
                        wc_display_product_attributes( $product );
                    }
                ?>
            </div>
        </div>
        <div class="woodmart-buttons-alt">
            <div class="wrap-wishlist-button"><?php do_action( 'woodmart_product_action_buttons' ); ?></div>
            <div class="woodmart-add-btn"><?php do_action( 'woocommerce_after_shop_loop_item' ); ?></div>
            <div class="wrap-quickview-button"><?php woodmart_quick_view_btn( get_the_ID() ); ?></div>
        </div>
        <?php if ( woodmart_loop_prop( 'timer' ) ): ?>
            <?php woodmart_product_sale_countdown(); ?>
        <?php endif ?>
    </div>
</div>

Regards

Dear Bogdan…
Thank You very much…
It works just great… You and Xtemos are awesome!!!

But…, You didn’t answer my question about this https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/page/2/#post-45081
Do I need to apply it too?

And…, how do I remove You variation? I mean.., please take a look at this..
http://prntscr.com/p3mr2i

1. I want that to disappear.

2. I want to completely deactivated Your variation feature and remove that “Select Options” button. I have deactivated Your variation feature but I can’t remove that “Select Options” button which will take us to the product page when it’s clicked.

3. That is the variations from YITH plugin. I want to use it. But, somehow, it just doesn’t work correctly. Because when I select or chose one of the options, the add to cart button/icon doesn’t show up. The correct is that when I select and chose one of the options, the add to cart button/icon must show up. But, it just doesn’t work that way.

Once again…, thank You very much… Really…

Best regards…

1-2. Try to add the following custom code to the Custom CSS area in theme settings to remove variation Button and Select form from product grid.

.woodmart-buttons-alt .add-to-cart-loop.product_type_variable {
	display: none;
}

.woodmart-buttons-alt .variations_form {
	display: none !important;
}

If you want to remove tooltips you need to add custom code that we provided you earlier to remove them in this post https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/page/2/#post-45081.

3. Try to test how this plugin works in the default theme.

Regards

Dear Bogdan..
Thank You for the codes.. But, it seems that the problem is still there. Please have a look… http://prntscr.com/p3slyt
Do You think that it is same case with this
https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/page/3/#post-45381

and this
https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/page/3/#post-45406 ?

Also, this is a screenshot from my old olhut.com https://prnt.sc/ip8fof.
There is a YITH wishlist button there. I have installed the plugin but I couldn’t find a way to make it same as olhut.com.

Thank You…

Warmest regards…

Hi,

“Select option” button is not our button, this is default Woocommerce button that appears when you create a variable product. This button appears because our theme is supporting default woocommerce functionality.

We have checked your site and see that Select option button is correctly hidden by following custom code (https://xtemos.com/forums/topic/strange-look-on-my-shop-and-product-category-page/#post-142754)

Check the screenshot http://prntscr.com/p43o75

If your site styles have a difference between logged and unlogged status we recommend you to clear your site cache after new styles applied or didn’t use cache plugins during site developing process to avoid a misunderstanding of style configurations.

Regards

Dear Bogdan…

Thank You for the reply.. I really appreciate it..

I have applied Your last code, but it just doesn’t work like olhut.com.
About the variation, I will try to contact the plugin developer about it… I think it is the same problem with
https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/page/3/#post-45381
and this
https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/page/3/#post-45406

Anyway, what about the wishlist button?
There is YITH wishlist button here https://prnt.sc/ip8fof
I have activated the plugin and made up the settings.
But, my new sites don’t have that YITH wishlist button.
Please help…

Thank You very much…

Warmest regards…

Hi,

By default, YITH Wishlist plugin didn’t have “Add to wishlist” button on shop page product grid (http://prntscr.com/p4ky3e).

You can check how it works in default theme on official YITH Wishlist demo site: https://plugins.yithemes.com/yith-woocommerce-wishlist/shop/

Regards

Dear Bogdan..

Thank You very much..
Yes, I see it now… That YITH wishlist button shows in quick view, and actually that is enough. My point is that I don’t want people waste their time for loading time to go the product page. If selecting options or selecting products or adding to cart can be done on the shop page or the product category page directly or via quick view, that is enough for me. Really…

But, as like we have done before on olhut.com, could You help me to make it happen too for my new two sites? I am sorry for this. But it’s ok if it is beyond Your support policy…

However, thank You very much.

Best regards…

Due too frequently performance issues and clients request, since Woodmart 4.0 update our theme has own build-in Wishlist functionality. If you need “Add to Wishlist” button on the shop page product grid you need to use our theme build-in wishlist. More about Woodmart Wishlist you can find in our theme documentation (https://xtemos.com/docs/woodmart/woodmart-wishlist/).

If you are using YITH Wishlist there will be no wishlist button on product grid because our theme supports only default YITH Wishlist plugin functionality. Since YITH Wishlist plugin didn’t add any button on the product grid (https://prnt.sc/p4ky3e) it cant be added there via theme custom code only.

Regards

Dear Bogdan…

I am sorry for my late reply…
And.., thank You very much for the explanation..

I think I will ask for that theme custom code later for my other project.. I have to rethink about whether I need the YITH Wishlist button on shop and product category page or it is better to have it only on YITH Qucik View.

But…, right now I have other problem..
The look of furnihere.com is strange again after theme update…, but furniturerotansintetis.com remains just ok. Here is the screenshot http://prntscr.com/p5q25d. I just don’t know why..

Please help…

You and all XTEMOS team members are awesome!!!

Thank You…

Hi,

In the latest update, product grid structure was optimized so the old custom code will be not working. Try to replace your child theme code from this post (https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/#post-44948) with the following code:

<?php 
global $product;
$action_classes  = '';
$add_btn_classes = '';
if ( 'carousel' === woodmart_loop_prop('products_view') ) {
    $action_classes  .= ' woodmart-buttons wd-pos-r-t';
    $add_btn_classes .= ' wd-action-btn wd-add-cart-btn wd-style-icon';
} else {
    $action_classes  .= ' wd-bottom-actions';
}
do_action( 'woocommerce_before_shop_loop_item' ); ?>
<div class="product-wrapper">
    <div class="content-product-imagin"></div>
    <div class="product-element-top">
        <a href="<?php echo esc_url( get_permalink() ); ?>" class="product-image-link">
            <?php
                /**
                 * woocommerce_before_shop_loop_item_title hook
                 *
                 * @hooked woocommerce_show_product_loop_sale_flash - 10
                 * @hooked woodmart_template_loop_product_thumbnail - 10
                 */
                do_action( 'woocommerce_before_shop_loop_item_title' );
            ?>
        </a>
        <?php woodmart_hover_image(); ?>
        <div class="wrapp-swatches"><?php echo woodmart_swatches_list();?><?php woodmart_add_to_compare_loop_btn(); ?></div>
        <?php woodmart_quick_shop_wrapper(); ?>
    </div>
    <div class="product-information">
        <?php
            /**
             * woocommerce_shop_loop_item_title hook
             *
             * @hooked woocommerce_template_loop_product_title - 10
             */
            
            do_action( 'woocommerce_shop_loop_item_title' );
        ?>
        <?php
            woodmart_product_categories();
            woodmart_product_brands_links();
        ?>
        <div class="product-rating-price">
            <div class="wrapp-product-price">
                <?php
                    /**
                     * woocommerce_after_shop_loop_item_title hook
                     *
                     * @hooked woocommerce_template_loop_rating - 5
                     * @hooked woocommerce_template_loop_price - 10
                     */
                    do_action( 'woocommerce_after_shop_loop_item_title' );
                ?>
            </div>
        </div>
        <div class="fade-in-block">
            <div class="hover-content woodmart-more-desc">
                <div class="hover-content-inner woodmart-more-desc-inner">
                    <?php 
                        if ( woodmart_get_opt( 'base_hover_content' ) == 'excerpt' ) {
                            echo do_shortcode( get_the_excerpt() );
                        }else if ( woodmart_get_opt( 'base_hover_content' ) == 'additional_info' ){
                            wc_display_product_attributes( $product );
                        }
                    ?>
                </div>
            </div>
            <div class="woodmart-buttons-alt <?php echo esc_attr( $action_classes ); ?>">
                <div class="wrap-wishlist-button"><?php do_action( 'woodmart_product_action_buttons' ); ?></div>
                <div class="woodmart-add-btn<?php echo esc_attr( $add_btn_classes ); ?>"><?php do_action( 'woocommerce_after_shop_loop_item' ); ?></div>
                <div class="wrap-quickview-button"><?php woodmart_quick_view_btn( get_the_ID() ); ?></div>
            </div>
            <?php if ( woodmart_loop_prop( 'progress_bar' ) ): ?>
                <?php woodmart_stock_progress_bar(); ?>
            <?php endif ?>
            
            <?php if ( woodmart_loop_prop( 'timer' ) ): ?>
                <?php woodmart_product_sale_countdown(); ?>
            <?php endif ?>
        </div>
    </div>
</div>

After that try to replace custom CSS code from this post (https://xtemos.com/forums/topic/you-have-activated-your-purchase-code-more-than-3-times-you-are-allowed-to-do-t/page/2/#post-45048) with following custom CSS code:

body .product-grid-item .woodmart-buttons-alt {
	max-width: 300px;
	width: 100%;
	margin: 0 auto;
	flex-direction: column;
	align-items: stretch;
}

body .product-grid-item .fade-in-block .woodmart-buttons-alt div > a {
	color: white;
	border-radius: 0 !important;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	width: 100%;
	padding: 10px 14px;
}

body .product-grid-item .fade-in-block .woodmart-buttons-alt div > a.loading > span {
display: none;
}

.product-grid-item .woodmart-buttons-alt div > a:hover,
.product-grid-item .woodmart-buttons-alt div > a:focus {
	color: white;
	-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
	box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}

.product-grid-item .woodmart-buttons-alt #wcbpg_open_popup {
	padding: 10px 14px;
	text-decoration: none;
}

.product-grid-item .woodmart-buttons-alt div > a > span {
    -webkit-transform: none !important;
    transform: none !important;
}

.product-grid-item .woodmart-buttons-alt div > a:before {
	display: none !important;
}

.product-grid-item .wrap-wishlist-button i {
	display: none;
}

.product-grid-item .woodmart-buttons-alt .yith_ywraq_add_item_product_message {
	display: none !important;
}

.product-grid-item .wrap-wishlist-button,
.product-grid-item .woodmart-add-btn > a,
.product-grid-item .woodmart-add-btn > div {
	margin-bottom: 5px !important;
}

.product-grid-item .woodmart-buttons-alt div > a,
.product-grid-item .woodmart-buttons-alt div > a {
		background-color: #83B735 !important;
}

.product-grid-item .woodmart-buttons-alt div > a:hover,
.product-grid-item .woodmart-buttons-alt div > a:focus {
		background-color: #6ca300 !important;
}

Regards

Dear Bogdan…

Thank You very much…
You helped so much…
The problem is solved..
Once again, thank You…

But…, I am really sorry…
I have another problem…
Please check..
http://prntscr.com/p6e1ls
The buttons of the product above are behind the product below. That problem happens too when I check on mobile.. When I point my finger to the product, the buttons are hidden. And FYI, I have placed the Z-Index code You gave me, but that doesn’t work.
Please help…

I do really wish You and XTemos all the best!!!
Thank You very very much…

Warmest regards…

Hi,

This issue is caused by your site custom CSS http://prntscr.com/p6oa1f. Try to remove it first.

Regards

Dear Bogdan…

Problem is solved..

Thank You very much..
I think that I have no more problem here…

I wish You all the best because You and Xtemos are the best!!!

Salute!!

Warmest regards…

You are welcome!

[Author]

Posts