Several problems I am facing
Hello,
I am new to Wordpress and just bought BeTheme, because I cannot code or anything. Therefore, this way it looks easier to create a website.
However, I am facing a few problems and would like your help on this.
First, I will tell what kind of website I want to create and then tell my problems.
So I want to create a website where I can show my greeting cards (like birthday cards, invitation cards, greeting cards, etc.) on my website. When someone clicks on a card it needs to show several pictures and other cards which are related. I achieved this with 'woocommerce', BUT this comes with a shopping cart / buy functionality. This I don't need. BUT what I need is a button on that (single product) page which redirects them to my Amazon AND Ebay shop. So nothing will be bought on my website, but it NEEDS a button to link to external websites.
I also achieved this with woocommerce by changing the product to 'affiliate/external' and then the 'add to cart' button changes the text to what I want (like "Buy now on Amazon). But this way I can only add ONE link. Also, I cannot use variations this way. I have 2 variations (normal size and postcard size).
I watched a lot videos on your youtube channel and searched on this forum, but could not find a clear answer.
The following problems occur for me:
GENERAL
- I want to disable the footer. Only the most bottom part where I write my copyright should be shown. Here I also want also to add my social media icons/links (see https://themes.muffingroup.com/be/artist3/product/cras-iaculis-eros/).
I read this article, but it is still unclear for me how to do it: https://support.muffingroup.com/documentation/footer/#footer_widgets-footer-copyrightarea
- I want the underline for the menu tabs with some animation when hovering (see https://themes.muffingroup.com/be/store2/).
I found the underline option, but cannot find the transition option.
- I want to add a contact form, but cannot see such an option in Elements. How can I do this?
- Is it possible to show a search bar with the header "transparent"?
I can only see the search bar when selecting "shop" or "shop split".
- I set a background image (Global -> General -> Background) so that I have an image for my homepage at the top. But now that image is showing everywhere. How can I change this that it only shows on my homepage. Furthermore, I want to use different images below my navbar for each page (see https://themes.muffingroup.com/be/franchise/franchise/). But this uses the same image, but I want to use different images for each page.
- I want the height of an image on my homepage bigger, but I cannot achieve this. (see screenshot)
I used a pre-built section for this, but cannot find a way to get a taller image (birthday card image from Freepik as an example)
PRODUCTS
- I want multiple buttons on the product page which redirects to my Amazon / Ebay and other shops.
I am able to link only ONE now.
- I want to disable the cart/checkout/buying functionalities.
I found the options to hide the icons everywhere, but maybe there is a function where I can disable it all?
- For the product images (single product), I don't want thumbnails below (or anywhere else). I just want arrows (right and left) on the main image itself. Like a slider.
- For the product images, I want to set a ratio aspect (like 3:4). This is for all my cards (products). So also when viewing images within the categories.
I found this option built-in in Woocommerce. Appearance -> Customize -> Woocommerce -> Product Images -> Thumbnail cropping,, but the main image on the single page is not changing. (see screenshot)
- I want to add variations to my cards (so I have normal size 5x7 inch and postcard size 4x6 inch). When selecting another, the images need to change.
- I want the buy button at the bottom (see screenshot).
No, adding placeholders does not work well. Already tried that :)
- I want a share button at the right top (of the title) (see screenshot).
I hope you can help me out and so sorry for so many questions.
Comments
Hello,
GENERAL:
1) If you want only the copyright area, remove all widgets from Appearance -> Widgets from the Footer tabs.
After WordPress changes the Widgets area, it might be hard to erase whole content from there, so if you have difficulties, I suggest installing Classic Widgets plugin, which restores the previous view, where it is easier to remove elements.
2) When you add links to socials in Betheme -> Theme options -> Social, they appear in the Footer.
3) Please go to Betheme -> Theme options -> Menu & Action Bar -> Menu, and choose the style for menu you want.
4) Check the following video tutorial:
https://support.muffingroup.com/video-tutorials/how-to-build-forms-with-contact-form-7-betheme/
5) Search field can be activated in Betheme -> Theme options -> Search -> Form.
6) Set this image as Featured Image in the page editor.
7) What dimensions does this image has? Did you try using a higher one?
PRODUCTS:
1) If you want more buttons, you must put them in the product content.
2) You need only to hide the icons from the header. You can also remove the cart and checkout pages (if you have them).
3) Go to Betheme -> Theme options -> Shop -> Single product, and set the Related products count to 0.
4) Image sizes are predefined for the single product style you choose. If you want your product images to be in a 3:4 ratio, you need to upload images in that size ratio.
5) WooCommerce does not have the option to add variations with different images for 'affiliate/external' products. You would have to create two products.
6) Please attach a link to your website so I can take a closer look at it.
7) There is no option to add share, as you showed in the screenshot. Instead, you can activate this:
You can activate it in Betheme -> Theme options -> Global -> Navigation & share.
Best regards
Thank you for your reply. It helped a lot and fixed most of the problems. However, some are not resolved yet. Could you please have a look at it. (unfortunately I don't have a live website yet, so for now I cannot share a link as I am doing this all on localhost)
- I set a background image (Global -> General -> Background) so that I have an image for my homepage at the top. But now that image is showing everywhere. How can I change this that it only shows on my homepage. Furthermore, I want to use different images below my navbar for each page (see https://themes.muffingroup.com/be/franchise/franchise/). But this uses the same image, but I want to use different images for each page.
You suggested to set a featured image on the page. So I added this, but nothing happened. I now have 3 background images (Purple, Green and Orange)
As you can see on the screenshot I cannot see the orange background nor is the purple background removed. What I actually want is to remove the purple background and use the green background (sub-header background, like this demo site). In full width, now on the left/right there is another color background. Also, I don't want to see the breadcrumbs, need to disable that too. If only disabling breadcrumbs is not possible, disabling sub-header text is also fine for now.
- I want the underline for the menu tabs with some animation when hovering (see https://themes.muffingroup.com/be/store2/).
You suggested to change the style. This I already had done. However, I want that animation (transition) effect when hovering with your mouse over the menu item, like the demo site. The style I use is "Line below Link (80% width, 1px height)
Click here to see what I mean (.gif) You need to click on the image to see the video.
- For the product images (single product), I don't want thumbnails below (or anywhere else). I just want arrows (right and left) on the main image itself. Like a slider.
You suggested something else. You suggested to set the 'related products count' to zero. But that's not what I want. No, I NEED that! Please see screenshot of what I want. I want those small thumbnails gone and just arrows left/right ON the image itself. Or something similar to that.
- I want multiple buttons on the product page which redirects to my Amazon / Ebay and other shops.
You suggested that I should add 3 buttons on the single product page under "product options". However this is not intuitive. I use a template for the "single_product" and if I put in the template a button I cannot add links on it. Furthermore, the builder does not work well when editing "product options" used with a template. Even if it did, this would mean that I always have to create 3 buttons for each product every time. Do you have any other suggestions for this?
- I want the buy button at the bottom (see screenshot).
You asked a link to my website, but I don't have any yet. Everything is on my localhost. But I attached a screenshot where I want the button.
If I put palceholders there, the site does not look good when resizing etc.
Thank you in advance.
1) Remove the image from the Global Theme options and from the page Subheader, and the Featured image should show up.
If you do not see it, check the three first settings for transparency in Betheme -> Theme options -> Global -> General.
2) You can hide breadcrumbs in Betheme -> Theme options -> Header & Subheader -> Subheader.
3) Please put the following CSS code in Betheme -> Theme options -> Custom CSS & JS -> CSS, and check if the effect works then:
#Top_bar .menu > li > a:after{ transition: 1s!important; }4) Unfortunately, there is no setting to set the featured image, as you showed on the screenshot.
5) The product template is global for all products, so if you put buttons with links, they will appear on all products. The only option is to add different buttons to the product, as I showed in the previous message.
6) If you are using a product template, please, check the following video tutorial:
https://support.muffingroup.com/video-tutorials/flexbox-positioning-with-bebuilder/
Best regards
PS.
If you are new to BeTheme, we suggest looking into our support center: https://support.muffingroup.com.
Thanks
Again, thank you very much for the help!
I have almost resolved all of my issues/questions. However, for the last question I still cannot do it.
- I want the buy button on the single product page at the bottom (see screenshot above).
You suggested to look at the Youtube video, and I did. I understand the positions now better. But I still cannot do it.
I use a 2/3 and 1/3 layout. 2/3 is product image and 1/3 is info, like title, description and the button. But when I play with the positions the whole 1/3 section moves down or centers. So the title and description also centers or goes down. But I want only the elemt 'button' to go down at the bottom. I can do this if I can make 2 section among each other and then use wrap. Like one on top and one bottom (see screenshot), but this is not possible.
So how can I put my button on the bottom (like the screenshot on my previous comment).
I achieved this by editing the element -> Advanced -> Positioning -> set Position to "Offset" and change "Top" to 350px. But this is like hardcoded and would rather use another option (if there is any).
Furthermore, I want to change the text "Related products" into "More Awesome Birthday Cards". But I want to do this in the template, because when someone shows a "Greeting card" , then I want to show the text "More Greeting Cards".
I read on your forum that this can be done with the translation plugin (WPML), but I don't use any translations, only English. Furthermore, that way I cannot change the text for each template.
Last thing (for now haha): on the Single Product Page I have this related products and I am showing 4 products (4 columns). On mobile it shows 2 images next to each other (one left and one right), but on mobile I want to show 4 products but with ONE column (so when scrolling down, just 1 image to be shown). How can I do this? (If I use 4 * 1/4 section, and put in every section an element "related products", then sometimes it shows a product twice (or even three times)). So this is not an option.
1) Please open the Section options, and set the Wrap's vertical spacing to stretch.
After that, in the option of wrap with button, set the positioning to space between option.
2) In Product Related -> Style -> Item title, open the Typography, and set the size to zero. After that, you can add Heading element above that, with your own text.
3) Use the following CSS code:
@media only screen and (max-width:767px){ .column_product_related .products .product{ width: 100%!important; } }Betheme -> Theme options -> Custom CSS & JS -> CSS.
Best regards
For the first remark, it is still not resolved. I already tried to play with the positioning, but cannot make the button go down. (see screenshot for your suggested answer). This brings the button down, yes, but also moves my description and other elements. However, I want everything on the top, expect the button.
Any other suggestions?
Open the wrap options again, and change the positioning to the top. Then go to the Spacing tab, and set the bottom padding at least to 60px.
After that, open Button options, and in the Positioning tab, change Position to Absolute, and set the Bottom padding to 0.
Thanks
Sorry, but I need help with the single product images.
All my images are 900x1300px (something like a 3:4 ratio), but when I upload this on my website the main image comes very big out. When I upload like 2000x2000px, the image looks smaller (even when it is bigger).
The blue one is 2000x2000px.
The green one is 900x1300px.
The third image is thumbnails of "related products".
So the "relate products" is fine, because I want it like 3:4 ratio, but the main image is too big. You can see that the end is not reached. How can I upload this properly. What sizes should I use to get something like a rectangle?
I still have no online website. Everything is on localhost.
Did you try decreasing the Product Images element size?
This item displays an image in full size, so if you want to show a smaller one, you should upload images with smaller width and height.
Best regards