This topic has 21 replies, 2 voices, and was last updated 7 years, 11 months ago ago by Eva Kemp
Hi Eva,
1. I would like to make a static block that is above the ‘Related Products’* part of my webshop. In a previous post, you explained to me that I can create a static block in WP Dashboard > Static Blocks and use “Call to Action” element in Visual Composer editor. Then add “8theme – Static Block” widget in Appearance > Widgets > Footer 1.
If I make a ‘Call to Action’ element in VC, then the width is not stretched over the entire page. Please see: https://www.atelierchristian.nl/staticblocks/garanties/. As said, I want to place this calls to action above the ‘Related Products’. How can I do this, and make the ‘Call to Action’ stretched?
* On my website atelierchristian.nl this is called ‘Ook interessant voor u’.
2. With regards to the short product description (next to the image of a product), is it possible to have alternating grey stripes between the words? Such as:
Brand Calvin Klein [grey background]
Material Silver [white background]
Width 21 mm [grey background]
etc.
And: is it possible to have different headers over the short description? Please see https://www.dropbox.com/s/qhkzxuv3qs3eczj/product%20description.png?dl=0.
3. I would like to work with Child Theme. I have followed the instructions. What do I do from here? Do I activate the Child Theme rather than the Royal Theme in wp-admin?
4a. Can I change the order of the tabs? See e.g. https://www.atelierchristian.nl/webshop/ringen/geel-gouden-heren-zegelring/.
I would like to change the tabs, for instance put ‘Levering and Ontvangst’ before ‘Beoordelingen’.
4b. Can I include the extra tab to some products and exclude them with others?* If not, can I add another tab to the product page in the wp-admin (where I have the possibility to write a Title and Text for a custom tab)? Thank you!
* I have created the tab ‘Certificaat van echtheid’ in my test.atelierchristian.nl page.
5a. Where do I translate the words ‘Product Brand’ and ‘Productomschrijving’, which is on every product page.
5b. How do I remove the ‘Email to a friend’ part on every product page?
5c. I would like to replace the ‘Email to a friend’ part with an icon of a diamond. When the visitor hovers over this icon, they will then see a text that I want to write, with a link in it. How would I do this?:)
6a. Can I change the ‘Search’ button on every page? I would like to modify this (e.g. change or remove the word ‘Search’), and perhaps use plugin searchIQ.
6b. Would changing the ‘Search’ function on the main website also change the mobile view?
6c. Can I rename the ‘Cart’?
7a. I have placed a Featured image on the posts, so that they will appear under a post with an image. But the downside is that every post starts with this image (300 x 200 px). This does not result in a good look, see e.g. https://www.atelierchristian.nl/goudinkoop-de-beste-prijs/.
How do I remove the header on a post page?
7b. Can I remove the yellow box with the words ‘More Details’ on every post? And can I alter it?
Many thanks for your answers.
Kind regards,
Christian
‘3. I have looked at https://codex.wordpress.org/Child_Themes but do not understand it, because it goes about creating a Child Theme and Royal already has one.
5d. Do I translate the part ‘Leave a reply’ and ‘Your review’ at ‘royal\wp-content\themes\royal\comments.php in line 45’? Or somewhere else?
Hello,
1. You need select static block in product editor page in Additional Information Block http://storage3.static.itmages.com/i/16/1221/h_1482319387_1006182_2024c83d93.jpeg like I did for this product https://www.atelierchristian.nl/webshop/niet-gecategoriseerd/juwelier-christian-catalogus-p-3/ .
To stretch it I selected “Stretch Row and content” option in your Static Block http://storage5.static.itmages.com/i/16/1221/h_1482319753_9980575_ef27acf4ee.jpeg .
2. Please show a page where you see grey stripes.
3. Upload royal-child folder from the theme package to wp-content/themes directory and activate child theme in Appearance > Themes.
4a. You can re-order tabs as described in Woocommerce documentation https://docs.woocommerce.com/document/editing-product-data-tabs/ .
4b. Woocommerce documentation https://docs.woocommerce.com/document/editing-product-data-tabs/ has instruction how to add custom tab.
5a. You can translate them in .po file in wp-content/themes/royal/languages directory https://www.8theme.com/demo/docs/royal/#!/1_how_to_translate .
5b. Add this code in Global Custom CSS:
.product-information .email-link {
display: none;
}
5c. You need edit the code in wp-content/themes/royal/framework/woo.php in lines 858-871.
5d. Please read the documentation how to translate the theme (see “5a”).
6a. Please use this css code:
.header-type-17 .header-top .header-search span {
display: none;
}
6b. To change search function will require additional customization which is beyond our basic support scope. Sorry.
6c. Yes, change it in translation file.
7a. Use this css code:
.single-post .wp-picture {
display: none;
}
7b. Sorry, but I don’t see the yellow box with the words ‘More Details’. Could you please show a screenshot?
Regards,
Eva Kemp.
‘1. Thank you. So, this means I will have to install it on every product page one by one?
‘3. I cannot upload it because it says the following: ‘Er is geen hoofdthema aanwezig. Het hoofdthema “royal” installeren’.
Translated: there is no mother theme available. Please install Royal’. But I have already installed Royal?
Would you please look at it: https://www.atelierchristian.nl/wp-admin/themes.php.
‘4. I have written the following in functions.php of the test.atelierchristian.nl site:
<?php
global $etheme_theme_data;
$etheme_theme_data = wp_get_theme( get_stylesheet_directory() . ‘/style.css’ );
require_once( get_template_directory() . ‘/framework/init.php’ );
add_filter( ‘woocommerce_product_tabs’, ‘woo_new_product_tab’ );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs[‘test_tab’] = array(
‘title’ => __( ‘Certificaat van echtheid’, ‘woocommerce’ ),
‘priority’ => 50,
‘callback’ => ‘woo_new_product_tab_content’
);
return $tabs;
}
function woo_new_product_tab_content() {
// The new tab content
echo ‘<h2>Meesterstempel en Garantie</h2>’;
echo ‘<p>Wij zijn echt</p>’;
}
add_filter( ‘woocommerce_product_tabs’, ‘woo_reorder_tabs’, 98 );
function woo_reorder_tabs( $tabs ) {
$tabs[‘description’][‘priority’] = 5; // Description first
$tabs[‘additional_information’][‘priority’] = 10; // Additional information second
$tabs[‘review’][‘priority’] = 15; // Review third
return $tabs;
}
I have two questions about this.
– if you look at the result, then there is an offsetting distance between the tabs which isn’t there normally. Please compare test product with real product.
– how can i make the custom tab that i will write in functions.php have two column, which text on the one side, and an image on the other? Thank you.
‘5b. Thank you
‘5c. I see the following code:
if(!function_exists(‘et_email_btn’)) {
function et_email_btn($label = ”) {
global $post;
$html = ”;
$permalink = get_permalink($post->ID);
$post_title = rawurlencode(get_the_title($post->ID));
if($label == ”) {
$label = __(‘Email to a friend’, ETHEME_DOMAIN);
}
$html .= ‘
‘.$label.’‘;
echo $html;
}
}
Two questions:
– How do I get the icon of a diamond there?
– How do I get a text that will display itself when the mouse hovers over the text?:)
‘6a. Thank you. Is it also possible to change the text that appears when you click on the Search icon?:) It now reads the following:
SEARCH ENGINE
Use this form to find things you need on this site
Search for…
[button] Search
‘7a. Thanks that worked.
‘7b. Please see https://www.dropbox.com/s/a6hyg5p1t7v5a1p/yellow%20box.png?dl=0.
Thank you.
Hello,
1. Yes, you’re right.
3. Please make sure parent Royal theme folder is named “royal” and and not “Royal_2.8” in wp-content/themes directory.
4. Add this code in Global Custom CSS:
#tab_additional_information, #tab_review {
display: none;
}
5c. Sorry, but it requires additional customization.
6a. You can change the text in your translation files.
7b. Add this code in Global Custom CSS:
.single-post .thumbnails-x .zoom > i {
background-color: transparent;
}
.single-post .post-slide .btn_group {
display: none;
}
Regards,
Eva Kemp.
‘1. Thank you
‘2. Please see this link for an example of an alternating grey and white text. How can I achieve this, and can I place different headers over the short description so that there are two different descriptions in the short (like on that page ‘Specificaties’ and ‘Omschrijving’)?
‘3. I tried renaming the theme folder from ‘Royal_Theme-v2.8’ to ‘royal’ and the whole site crashed.
See https://www.dropbox.com/s/m077zgtgguav22e/Schermafbeelding%202016-12-23%20om%2000.05.25.png?dl=0.
What should I do to create a Child Theme?
‘4. I have added this css code to the test website, but the offsetting distance between the tab ‘Description’ and the tab ‘Beoordelingen’ still remains. See e.g. https://www.test.atelierchristian.nl/webshop/ringen/rose-gouden-ring-met-marquis-geslepen-amethyst/.
What should I do?
And: how can i make the custom tab that i will write in functions.php have two column, which text on the one side, and an image on the other? Thank you.
‘7b. Thank you that worked.
8. When you click on the main website the email button (as part of the share buttons), it automatically brings you to the mailing system (for instance, Mail for Mac). That is good. But the content image is ‘Check this out: [page url]’.
How can I make the automatic content empty?
Many thanks
Hello,
2. Does that site use Royal theme? Please show a page from your site.
3. Please provide FTP credentials to check the issue.
4. I didn’t see the code in Global Custom CSS section, so I’ve added it. Please check now https://www.test.atelierchristian.nl/webshop/ringen/rose-gouden-ring-met-marquis-geslepen-amethyst/ .
As for the columns you need edit your text in functions.php code using html tags or read this article https://vip.wordpress.com/documentation/how-to-create-columns-in-posts/ (refer to css way).
8. You need remove that text in wp-content/themes/royal/framework/shortcodes.php in line 2050. Delete this code &body=Check%20this%20out:%20'.$permalink.'
Regards,
Eva Kemp.
‘2. No, it is not a Royal theme site but I would like to use this functionality. I know that it is possible to place two different product types (e.g. featured and sale) on the same page, as you have with the Default Ecommerce Home page.
Is it possible to write words in the Short Description with an alternating grey and white line? Thank you.
‘3. I had provided it in the Private Content of the previous post. Please see also this Private Content:)
‘4. Thank you. How do I add an image in the left column of such a post?
‘8. That worked, thanks
Hello,
2. Yes, it’s possible. Have you already created such table on your site? Please show your page where you have it.
3. I’ve uploaded child theme and activated it for the site https://www.atelierchristian.nl/ .
Please check.
4. You need use <img>
tag, like <img src="http://link_to_your_image">
.
Regards,
Eva Kemp.
‘2. That’s good to know. I haven’t made such a page on my site, because I don’t know how to create the following two things:
– an alternating grey and white background for the words that I want to write
– a table for two different sets of words (and not just products)
Please help me further
‘3. Thank you.
– How did you do this?
– What do I do now? Do I erase every other CSS code that I have written and write them in Theme Options -> Custom CSS -> Global Custom CSS? Is that what ‘writing in Child theme’ means?
‘4. Thanks
Hello,
2. You need use <table>
tag to create a table. Read here https://www.tutorialspoint.com/html/html_tables.htm .
3. If you enable child theme you shouldn’t move all css code from Custom CSS to child style.css file. It will work with child theme too.
To make royal-child theme work I renamed “Royal-Theme_2.8” to “royal” via FTP and activated child theme in Appearance > Themes. That’s all.
Regards,
Eva Kemp.
‘2. Thank you. I cannot seem to get the effect that I want. Please see: https://www.dropbox.com/s/pbyh23zag786249/Schermafbeelding%202016-12-27%20om%2012.56.34.png?dl=0 and https://www.dropbox.com/s/sljynixp8kwqe14/Schermafbeelding%202016-12-27%20om%2012.44.58.png?dl=0.
The effect that I want is the following:
https://www.dropbox.com/s/qhkzxuv3qs3eczj/product%20description.png?dl=0.
There is an light grey background and then a white background. I couldn’t get this effect with the tables tutorial that you provided. Also, the light grey colour is not available.
Moreover, there is no option to click to a whole new menu like there is for products on the Default Ecommerce Home page (one for Sale, one for featured products).
Do you know what can be done for this?
‘3. Thank you. It is odd that the site crashed when I tried renaming the folder to ‘royal’.
‘7b. I have added the code, but it did not work. Please see: https://www.dropbox.com/s/sljynixp8kwqe14/Schermafbeelding%202016-12-27%20om%2012.44.58.png?dl=0
Hello,
2. Please add this html code to your product description:
<table class="data-table">
<tbody>
<tr class="first odd">
<th class="label">Color</th>
<td class="data last">
<span itemprop="brand">Black</span>
</td>
</tr>
<tr class="even">
<th class="label">Size</th>
<td class="data last">
<span>17</span>
</td>
</tr>
<tr class="odd">
<th class="label">Material</th>
<td class="data last">
<span>Leather</span>
</td>
</tr>
<tr class="even">
<th class="label">Type</th>
<td class="data last">
<span>T-shirt</span>
</td>
</tr>
</tbody>
</table>
and this css code in Global Custom CSS section:
.data-table {
width: 100%;
}
.data-table .even {
background: #f6f6f6;
}
Replace table values with yours.
there is no option to click to a whole new menu like there is for products on the Default Ecommerce Home page
Sorry, but it’s a bit unclear.
Please clarify with more details what you want to achieve.
7b. I don’t the the overlay in related posts http://storage5.static.itmages.com/i/16/1227/h_1482860168_9151237_32cd821674.jpeg .
Clear browser cache and check again.
Regards,
Eva Kemp.
‘2. Many thanks:)
With regards to the new menu in the short description, please see this link and these images: https://www.dropbox.com/s/00cj9dkgd8t70gp/Schermafbeelding%202016-12-27%20om%2020.43.04.jpg?dl=0 and https://www.dropbox.com/s/v7s69163sv1vpn6/Schermafbeelding%202016-12-27%20om%2020.43.01.jpg?dl=0.
When you click on one part of the short description, you get to see several columns. When you click on the other part of the short description, you get to see other columns. Is this possible?
‘7b. Thank you.
‘2. Can I change the height? It unfortunately is at the moment too much. Please see e.g. https://www.atelierchristian.nl/webshop/oorbellen/14-karaat-geel-wit-en-rose-gouden-oorbellen-zirkonia/.
– I have tried changing the height as explained in the HTML Tables, for instance by adding <table border=”1″ width=”100″ height=”50″>, or just <table height=”50″>. But that didn’t work.
– Then I tried adding the following. Custom CSS
.data-table {
height: 25%;
}
I had no success with that.
Thank you!
Hello,
I’ve added the css code in Theme Options > Custom CSS > Global Custom CSS:
.short-description table th,
.short-description table td {
padding: 0px;
}
.short-description table h6 {
margin-top: 10px
}
Please check it now.
Regards,
Eva Kemp.
Thank you Eva.
There is a small grey line that is just a little thicker than the rest, which makes the words oneven. Please see https://www.dropbox.com/s/h684q32xrshfqbs/Schermafbeelding%202016-12-28%20om%2016.26.54.png?dl=0.
Can this be taken out? Thank you:)
What I meant by the new menu in the short description, is just as on this page and the default Ecommerce home page:). So that when you click on one part of the short description, you get to see the columns that you see now:
Sieraad
Merk Christian
Materiaal 14 karaat geel- en wit- en rosé goud
Afmetingen 17 x 11 mm
Edelstenen Zirkonia
Voor Dames
But if you were to click on the other section that I want to place there, you would see other writings, such as:
Section 2
Writings 17 x 22 mm
Writings Writings
Writings Writings
Writings Writings
Hello,
Please add this css code:
table td {
border-top: none;
}
You can try to create such content in Visual Composer editor using Tabs element, then just copy the code and paste to short description.
Regards,
Eva Kemp.
Thank you Eva the css code worked.
Hello,
You’re welcome.
Regards,
Eva Kemp.
The issue related to '‘Default Ecommerce 3’' has been successfully resolved, and the topic is now closed for further responses