Se o WooCommerce estiver habilitado, outra aba "WooCommerce" estará visível nas Configurações . Nessa aba, você pode ajustar algumas opções de layout para páginas de produtos do WooCommerce. Essas opções também podem ser definidas nas Configurações Individuais de Produtos .
Posicionamento do Designer de Produto
Você pode escolher entre diferentes opções de posição para o Designer de Produto na página do produto.
Substituir imagem do produto : o designer do produto substituirá a imagem padrão do produto *
Em título do produto : o designer do produto aparecerá sob o título do produto *
Após o resumo : o resumo inclui, ou seja, o preço, o botão adicionar ao carrinho, etc. *
Gancho personalizado
Primeiro, você precisa verificar se seu tema ativado tem um content-single-product.php personalizado no diretório woocommerce. Este diretório está na pasta raiz do seu tema. Se houver um content-single-product.php , você precisa abrir este, caso contrário, vá para o diretório de plugins do woocommerce e abra o content-single-product.php no diretório de templates. Adicione o código a seguir em qualquer lugar no content-single-product.php , onde você gostaria que as necessidades do designer do produto aparecessem:
<?php do_action( 'fpd_product_designer' ); ?>
* Alguns ganchos de ação necessários precisam ser incluídos no tema. Use o Modo de Depuração para inspecionar quaisquer ganchos ausentes no seu tema.
Definir designer de produto para o lado esquerdo
Se você quiser definir/flutuar o designer do produto para o lado esquerdo na página de produtos, como nesta demonstração , siga estas etapas:
- No Fancy Product Designer/Configurações/WooCommerce/Posição do Product Designer, selecione "Substituir imagem do produto"
Em seguida, vá para Fancy Product Designer/ UI Composer/ selecione a UI que você está usando ou use a UI padrão /CSS personalizado e insira os seguintes estilos CSS:
.fpd-product-designer-wrapper {
float: left;
width: 518px;
//Aqui você precisa saber a largura do contêiner de imagem do produto que normalmente é exibido. Se você não sabe como obtê-la, tente valores de largura diferentes.
}
Observação: dependendo do tema usado, o código CSS personalizado pode ser diferente.