Home Forums WoodMart support forum Strange Look on My Shop and Product Category Page Reply To: Strange Look on My Shop and Product Category Page

#144002

Bogdan Donovan
Keymaster

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