Home › Forums › WoodMart support forum › ISSUE of 4 PRODUCT GRIDS PER ROW

ISSUE of 4 PRODUCT GRIDS PER ROW

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • April 27, 2020 at 10:27 am #190247

    CYCLEPRO
    Participant

    Hello There,

    There is problem to display buttons with 4 grids per row on shop page, please help to fix.
    As you can see attachments, the button with 3 grids per row is good, but button displaying with 4 grids per row is an issue need improved, so please do the buttons to display same as 3 grids per row. Pleaes see 2 screenshots for clarification. Thank you so much!
    Best regards,
    Byron

    Attachments:
    You must be logged in to view attached files.
    April 27, 2020 at 10:48 am #190255

    CYCLEPRO
    Participant

    Sometimes buttons display style with 3 grids per row will be like this, which is also good. see new attached please!

    Attachments:
    You must be logged in to view attached files.
    April 27, 2020 at 11:20 am #190265

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshot you attached and visited your website. It might be a third party plugin conflict issue.

    Please deactivate all the third party plugins. Then Go to WoodMart >> CSS Generator >> Generate CSS file.

    Then disable server caching, deactivate cache plugin, clear browser cache and check back.

    Best Regards.

    April 27, 2020 at 11:50 am #190278

    CYCLEPRO
    Participant

    Hello there,
    Oh my god, this is not the answer I want, so I have to give up this plugin? This plugin is very important, I can’t do without it.
    i hope you will benevolently provide a code to fix it, please! Thank you!

    Best regards,

    April 27, 2020 at 11:58 am #190281

    Artem Temos
    Keymaster

    Hello,

    Here is how it looks with 3 columns https://gyazo.com/1b6c11a49e375ba46e9f606f72fe1b81
    To remove the icon button on 4 columns layout add the following code to the functions.php file

    add_filter( 'woodmart_hover_width_small', '__return_false' );

    Regards

    April 27, 2020 at 12:03 pm #190283

    CYCLEPRO
    Participant

    Hello,

    Thank you very much for your positive response. Do you mean this code can achieve the same effect as 3 column?

    Best regards,

    April 27, 2020 at 1:07 pm #190295

    Artem Temos
    Keymaster

    This code will remove our icon button that is displayed when there is no enough space and that will lead to two buttons displays one below another.

    April 28, 2020 at 3:08 am #190422

    CYCLEPRO
    Participant

    Hello,

    Thank you very much for your support.
    This code is effective for desktop computers, but at the same time this code will change to the button style of other devices such as mobile phones and mini tablets, resulting in a very ugly layout, which is not acceptable to me, please provide The code is only for desktop and laptop or device screens in the simililar sizes , thank you!

    Best regards,

    April 28, 2020 at 6:10 am #190438

    Artem Temos
    Keymaster

    Try to add the following code snippet to the Custom CSS area for mobile and desktop devices in Theme Settings to fix this issue.

    .woodmart-hover-base:not([class*=add-small]) .wd-bottom-actions .add-to-cart-loop span {
    padding: 0;
}
    April 29, 2020 at 1:09 am #190728

    CYCLEPRO
    Participant

    Hello,

    I add the code to Custom CSS area for mobile and desktop devices in Theme Settings but there is nothing changed, it remains the same. please help to check. Thanks!

    Best regards,

    April 29, 2020 at 6:06 am #190750

    Artem Temos
    Keymaster

    Could you please clarify what exactly is wrong with the mobile layout? There is no enough space for two buttons on small screens and that is why they are one below another. You can switch to 1 column layout for mobile for example.

    April 29, 2020 at 7:38 am #190770

    CYCLEPRO
    Participant

    Hello,

    Sorry! Obviously you misunderstood what I meant. I mean that the first piece of code you provided can indeed solve the 4 column problem on the PC side that I originally proposed, but because this will also change the layout of the mobile phone or other mobile devices like iPad mini, it is not acceptable It, so sorry, and therefore I request that you re-provide the code only for the PC and laptop.
    Anyway，I want this code: add_filter( ‘woodmart_hover_width_small’, ‘__return_false’ );
    only work on PC or laptop and any similar screen size, do not change anything on mobile or mini tablet, So please give me an anoter code, i am grateful that you could help!

    You may have a review at our beginning conversation with screenshots, thank you very much!
    Best regards,

    April 29, 2020 at 8:01 am #190776

    CYCLEPRO
    Participant

    Supplementary explanation：
    Again, i mean, i need code only work on PC or laptop and any similar screen sizes for fixing the 4 columns problem, do not change anything on mobile or mini tablet, this mean it should keep the shopping cart icon on mobile or mini tablet…

    April 29, 2020 at 8:10 am #190782

    Artem Temos
    Keymaster

    By default, our add to cart button is changed to icon when product container gets smaller and doesn’t have enough space. The code we sent you disables this function and it works for all devices. It is not possible to disable this option for desktop only.

    April 29, 2020 at 11:42 am #190857

    CYCLEPRO
    Participant

    Obviously, this is the last problem hoping you can lend a helping hand. After this problem is fixed, you can sit back and enjoy it.

    I know that you have provided me with a lot of help, and have spent a lot of your time, which is why I have given you five stars in the themeforest many times in a row, perfectly commenting on the quality of your service and the perfection of the theme， So I am here begging you to help me once more, otherwise it leaves an effect which is too unacceptable. So, Please help, you can do it when you are not busy , This may be and should be the last problem we shouldn’t let it be a defect.

    April 29, 2020 at 1:39 pm #190935

    Artem Temos
    Keymaster

    We appreciate your support very much and thank you for your warm feedback. But how exactly do you want us to help you? Do you want to display the button on desktop and icon on mobile? What is the reason for that? As for me, it should look the same if you decided to disable the icon on the desktop.

    April 30, 2020 at 6:44 am #191090

    CYCLEPRO
    Participant

    Hello,

    Please see new attached screenshot for what i insist on changing, thank you so much for your time!

    Best regards,

    April 30, 2020 at 6:47 am #191094

    CYCLEPRO
    Participant

    attachment

    Attachments:
    You must be logged in to view attached files.
    April 30, 2020 at 9:52 am #191168

    Artem Temos
    Keymaster

    Try to keep this code in the child theme
    add_filter( 'woodmart_hover_width_small', '__return_false' );

    And put the following code to the Custom JS section in Theme Settings

    function hoverSmallContent() {
			jQuery('.woodmart-hover-base').each(function () {
				var $el = jQuery(this),
					$elBtn = $el.find('.woodmart-add-btn'),
					widthHiddenInfo = $el.outerWidth();
				if (widthHiddenInfo < 255 || jQuery(window).width() <= 768) {
					$el.addClass('add-small-content');
					if ($el.hasClass('woodmart-hover-base')) {
						$elBtn.addClass('wd-action-btn wd-add-cart-btn wd-style-icon');
					}
				} else {
					if ($el.hasClass('woodmart-hover-base') && (jQuery('body').hasClass('catalog-mode-on') || jQuery('body').hasClass('login-see-prices'))) {
						$el.find('.wd-bottom-actions .wd-action-btn').removeClass('wd-style-icon').addClass('wd-style-text');
					}
				}
			});
		}
		if (jQuery(window).width() <= 768) {
			hoverSmallContent();
		}
		jQuery(document).on('pjax:end', function (xhr, textStatus, options) {
			hoverSmallContent();
		});
    May 1, 2020 at 1:17 am #191395

    CYCLEPRO
    Participant

    Hi,

    This is exactly what I need, you did it! Thank you for your kind help.
    I know paid long time on helping me writting the long code so I appreciate you. At the same time, I also apologize, because your price is less than your effort, you have paid too much, so I am sorry!

    Everything is good enough after putting your long code, there is only a small issue that needs to be optimized, could you please support me once more? that is the shopping cart icon on the iPad Pro. Please help again to achieve the ultimate.
    Please look at the attached screenshot, thank you!

    Attachments:
    You must be logged in to view attached files.
    May 1, 2020 at 1:26 am #191397

    CYCLEPRO
    Participant

    Hi,

    Sorry! maybe there is nothing more to do, because i found that issue has just been fixed, maybe there was a cache led to…
    Thanks！

    May 1, 2020 at 11:03 am #191494

    Artem Temos
    Keymaster

    No, problem. We are glad to help you. Feel free to contact us if you will have any questions 🙂

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)