Support » Plugin: WooCommerce » В рамках одного товара вынести выбор фото выше предпросмотра

  • Resolved rofl113

    (@rofl113)


    В рамках одного товара вынести выбор фото выше предпросмотра.
    То есть если загрузить сайт на телефоне, то будет картинка товара (главная), а ниже будут маленькие картинки (другие фото). Вот хотелось бы что бы мелкие картинки были выше основной картинки, так что бы после картинки предпросмотра сразу шел заголовок и описание.
    В одной из тем это было из коробки. Но по некоторым причинам я пользуюсь стандартной темой для woocommerce это storefront.
    Возможно можно как то сделать switch двух объектов или в рамках hook “woocommerce-product-gallery–with-images” как то можно их поменять местами не затрагивая внутренности?

    То есть было так: M – основная картинка, O – остальные картинки.
    М
    ооо

    А хотелось бы так:
    ооо
    М

    Нашел похожую тему, но там нет ответа =((
    https://wordpress.org/support/topic/display-single-product-gallery-thumbs-above-main-image/

Viewing 3 replies - 1 through 3 (of 3 total)
  • rofl113

    (@rofl113)

    Сделал, но мне кажется это очень кривая реализация =((
    CSS:

    @media (max-width: 768px) {
    	.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
        position: relative;
        float: right;
        display: block;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    	}
    	.flex-viewport {
    		position: relative;
        float: right;
        display: block;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    	}
    	.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    		position: relative;
        float: right;
        display: block;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    	}
    	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    		position: relative;
        float: right;
        display: block;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    	}
    }
    Plugin Support Jesse Pearson

    (@jessepearson)

    Automattic Happiness Engineer

    @rofl113 This is your question translated via Google:

    Within one product, make a selection of photos above the preview.
    That is, if you download the site on your phone, then there will be a picture of the product (main), and below will be small pictures (other photos). I would like small pictures to be higher than the main picture, so that after the preview picture there would immediately be a title and description.
    In one of the topics, it was out of the box. But for some reason I use the standard theme for woocommerce is storefront.
    Perhaps you can somehow make a switch of two objects, or within the hook “woocommerce-product-gallery – with-images”, how can you swap them without affecting the inside?

    That is, it was like this: M – the main picture, O – the rest of the pictures.
    M
    Ltd

    And I would like this:
    Ltd
    M

    It might be able to be done via editing this template in your child theme:
    https://github.com/woocommerce/woocommerce/blob/3.7.1/templates/single-product/product-image.php#L39-L49

    If you moved line 39 down, then copied line 49 and pasted it in the space you created, it might do what you are looking for.

    Plugin Support Kenin

    (@kbassart)

    Automattic Happiness Engineer

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.